diff --git a/src/interface/web/app/settings/layout.tsx b/src/interface/web/app/settings/layout.tsx new file mode 100644 index 00000000..384e536d --- /dev/null +++ b/src/interface/web/app/settings/layout.tsx @@ -0,0 +1,36 @@ +import type { Metadata } from "next"; +import { Noto_Sans } from "next/font/google"; +import "../globals.css"; + +const inter = Noto_Sans({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Khoj AI - Settings", + description: "Configure Khoj to get personalized, deeper assistance.", + icons: { + icon: "/static/favicon.ico", + }, +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + + {children} + + + ); +} diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx new file mode 100644 index 00000000..2b4a3811 --- /dev/null +++ b/src/interface/web/app/settings/page.tsx @@ -0,0 +1,145 @@ +"use client"; + +import styles from "./settings.module.css"; + +import { Suspense, useEffect, useState } from "react"; + +import { useUserConfig } from "../common/auth"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardFooter, + CardHeader, +} from "@/components/ui/card"; +import NavMenu from "../components/navMenu/navMenu"; +import SidePanel from "../components/sidePanel/chatHistorySidePanel"; +import Loading from "../components/loading/loading"; + + +interface CardComponentProps { + header: string; + children: React.ReactNode; + footer: React.ReactNode; +} + +const CardComponent: React.FC = ({ header, children, footer }) => { + return ( + + {header} + + {children} + + + {footer} + + + ); +}; + +export default function SettingsView() { + const [title, setTitle] = useState("Settings"); + const [isMobileWidth, setIsMobileWidth] = useState(false); + const userConfig = useUserConfig(true); + const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg"; + + useEffect(() => { + setIsMobileWidth(window.innerWidth < 786); + const handleResize = () => setIsMobileWidth(window.innerWidth < 786); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( +
+ + {title} + +
+ +
+
+ +
+ }> +
+
+
Profile
+
+ + Name + + + + + + + +
+
+
+
Content
+
+ + Files + + Manage your synced files + + + + + + + + Github + + Set repositories to index + + + + + + + + Notion + + Sync your Notion pages + + + + + + + + Language + + + + + + + +
+
+
+ +
+
+
+ ); +} diff --git a/src/interface/web/app/settings/settings.module.css b/src/interface/web/app/settings/settings.module.css new file mode 100644 index 00000000..0bc76667 --- /dev/null +++ b/src/interface/web/app/settings/settings.module.css @@ -0,0 +1,11 @@ +div.page { + display: grid; + grid-template-columns: auto 1fr; + gap: 1rem; + height: 100vh; + color: hsla(var(--foreground)); +} +div.contentBody { + display: grid; + margin: auto; +}