diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index 52a191b..3f678d4 100755 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -1,6 +1,7 @@ import { AppSidebar } from "@/components/app-sidebar" import { SiteHeader } from "@/components/site-header" import { CommandMenuProvider } from "@/components/command-menu-provider" +import { SettingsProvider } from "@/components/settings-provider" import { SidebarInset, SidebarProvider, @@ -15,6 +16,7 @@ export default async function DashboardLayout({ const projectList = await getProjects() return ( + + ) } diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx index 0488ec8..8e67169 100755 --- a/src/components/app-sidebar.tsx +++ b/src/components/app-sidebar.tsx @@ -19,6 +19,7 @@ import { NavFiles } from "@/components/nav-files" import { NavProjects } from "@/components/nav-projects" import { NavUser } from "@/components/nav-user" import { useCommandMenu } from "@/components/command-menu-provider" +import { useSettings } from "@/components/settings-provider" import { Sidebar, SidebarContent, @@ -80,6 +81,7 @@ function SidebarNav({ const pathname = usePathname() const { state } = useSidebar() const { open: openSearch } = useCommandMenu() + const { open: openSettings } = useSettings() const isExpanded = state === "expanded" const isFilesMode = pathname?.startsWith("/dashboard/files") const isProjectMode = /^\/dashboard\/projects\/[^/]+/.test( @@ -94,7 +96,11 @@ function SidebarNav({ : "main" const secondaryItems = [ - ...data.navSecondary, + ...data.navSecondary.map((item) => + item.title === "Settings" + ? { ...item, onClick: openSettings } + : item + ), { title: "Search", icon: IconSearch, onClick: openSearch }, ] diff --git a/src/components/settings-modal.tsx b/src/components/settings-modal.tsx new file mode 100755 index 0000000..85bb1b3 --- /dev/null +++ b/src/components/settings-modal.tsx @@ -0,0 +1,166 @@ +"use client" + +import * as React from "react" +import { useTheme } from "next-themes" + +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { Label } from "@/components/ui/label" +import { Switch } from "@/components/ui/switch" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/components/ui/tabs" +import { Separator } from "@/components/ui/separator" + +export function SettingsModal({ + open, + onOpenChange, +}: { + open: boolean + onOpenChange: (open: boolean) => void +}) { + const { theme, setTheme } = useTheme() + const [emailNotifs, setEmailNotifs] = React.useState(true) + const [pushNotifs, setPushNotifs] = React.useState(true) + const [weeklyDigest, setWeeklyDigest] = React.useState(false) + const [timezone, setTimezone] = React.useState("America/New_York") + + return ( + + + + Settings + + Manage your app preferences. + + + + + + General + + Notifications + + Appearance + + + +
+ + +
+ + + +
+
+ +

+ Receive a summary of activity each week. +

+
+ +
+
+ + +
+
+ +

+ Get notified about project updates via email. +

+
+ +
+ + + +
+
+ +

+ Receive push notifications in your browser. +

+
+ +
+
+ + +
+ + +
+
+
+
+
+ ) +} diff --git a/src/components/settings-provider.tsx b/src/components/settings-provider.tsx new file mode 100755 index 0000000..46c5140 --- /dev/null +++ b/src/components/settings-provider.tsx @@ -0,0 +1,32 @@ +"use client" + +import * as React from "react" +import { SettingsModal } from "@/components/settings-modal" + +const SettingsContext = React.createContext<{ + open: () => void +}>({ open: () => {} }) + +export function useSettings() { + return React.useContext(SettingsContext) +} + +export function SettingsProvider({ + children, +}: { + children: React.ReactNode +}) { + const [isOpen, setIsOpen] = React.useState(false) + + const value = React.useMemo( + () => ({ open: () => setIsOpen(true) }), + [] + ) + + return ( + + {children} + + + ) +}