diff --git a/bun.lock b/bun.lock index 25a61e7..808c4af 100644 --- a/bun.lock +++ b/bun.lock @@ -6,9 +6,11 @@ "dependencies": { "@fontsource/fira-code": "^5.1.1", "@monaco-editor/react": "^4.7.0", + "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-scroll-area": "^1.2.3", "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-tabs": "^1.1.3", "@radix-ui/react-toggle": "^1.1.2", @@ -19,7 +21,7 @@ "devicons-react": "^1.4.0", "dockerode": "^4.0.4", "github-markdown-css": "^5.8.1", - "lucide-react": "^0.475.0", + "lucide-react": "^0.477.0", "monaco-editor": "<=0.36.1", "monaco-languageclient": "<=5.0.1", "next": "15.1.7", @@ -230,6 +232,8 @@ "@radix-ui/react-context": ["@radix-ui/react-context@1.1.1", "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.1.1.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q=="], + "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.6", "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw=="], + "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.0", "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg=="], "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.5", "https://registry.npmmirror.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-escape-keydown": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg=="], @@ -258,6 +262,8 @@ "@radix-ui/react-select": ["@radix-ui/react-select@2.1.6", "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-2.1.6.tgz", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg=="], + "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.2", "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.1.2.tgz", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ=="], + "@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.2", "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ=="], "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.3", "https://registry.npmmirror.com/@radix-ui/react-tabs/-/react-tabs-1.1.3.tgz", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-roving-focus": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng=="], @@ -872,7 +878,7 @@ "lru-cache": ["lru-cache@10.4.3", "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="], - "lucide-react": ["lucide-react@0.475.0", "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.475.0.tgz", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg=="], + "lucide-react": ["lucide-react@0.477.0", "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.477.0.tgz", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw=="], "markdown-extensions": ["markdown-extensions@2.0.0", "https://registry.npmmirror.com/markdown-extensions/-/markdown-extensions-2.0.0.tgz", {}, "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q=="], diff --git a/package.json b/package.json index 7d6da4b..79bd8f8 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,11 @@ "dependencies": { "@fontsource/fira-code": "^5.1.1", "@monaco-editor/react": "^4.7.0", + "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-scroll-area": "^1.2.3", "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-tabs": "^1.1.3", "@radix-ui/react-toggle": "^1.1.2", @@ -24,7 +26,7 @@ "devicons-react": "^1.4.0", "dockerode": "^4.0.4", "github-markdown-css": "^5.8.1", - "lucide-react": "^0.475.0", + "lucide-react": "^0.477.0", "monaco-editor": "<=0.36.1", "monaco-languageclient": "<=5.0.1", "next": "15.1.7", diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx new file mode 100644 index 0000000..6cfb49d --- /dev/null +++ b/src/app/dashboard/page.tsx @@ -0,0 +1,9 @@ +import { SettingsDialog } from "@/components/settings-dialog" + +export default function Page() { + return ( +
+ +
+ ) +} diff --git a/src/app/globals.css b/src/app/globals.css index 293901f..dccb447 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -32,6 +32,14 @@ --chart-4: 213 3% 78%; --chart-5: 213 16% 16%; --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 213 13% 6%; + --sidebar-primary: 213 13% 16%; + --sidebar-primary-foreground: 213 13% 76%; + --sidebar-accent: 0 0% 85%; + --sidebar-accent-foreground: 0 0% 25%; + --sidebar-border: 0 0% 95%; + --sidebar-ring: 213 13% 16%; } .dark { @@ -59,6 +67,14 @@ --chart-3: 216 28% 22%; --chart-4: 210 7% 28%; --chart-5: 210 20% 82%; + --sidebar-background: 216 28% 7%; + --sidebar-foreground: 210 17% 92%; + --sidebar-primary: 210 17% 82%; + --sidebar-primary-foreground: 210 17% 22%; + --sidebar-accent: 216 28% 22%; + --sidebar-accent-foreground: 216 28% 82%; + --sidebar-border: 216 18% 12%; + --sidebar-ring: 210 17% 82%; } } diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx new file mode 100644 index 0000000..4d55169 --- /dev/null +++ b/src/components/settings-dialog.tsx @@ -0,0 +1,129 @@ +"use client" + +import * as React from "react" +import { + Bell, + Check, + Globe, + Home, + Keyboard, + Link, + Lock, + Menu, + MessageCircle, + Paintbrush, + Settings, + Video, +} from "lucide-react" + +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/components/ui/sidebar" + +const data = { + nav: [ + { name: "Notifications", icon: Bell }, + { name: "Navigation", icon: Menu }, + { name: "Home", icon: Home }, + { name: "Appearance", icon: Paintbrush }, + { name: "Messages & media", icon: MessageCircle }, + { name: "Language & region", icon: Globe }, + { name: "Accessibility", icon: Keyboard }, + { name: "Mark as read", icon: Check }, + { name: "Audio & video", icon: Video }, + { name: "Connected accounts", icon: Link }, + { name: "Privacy & visibility", icon: Lock }, + { name: "Advanced", icon: Settings }, + ], +} + +export function SettingsDialog() { + const [open, setOpen] = React.useState(true) + + return ( + + + + + + Settings + + Customize your settings here. + + + + + + + + {data.nav.map((item) => ( + + + + + {item.name} + + + + ))} + + + + + +
+
+
+ + + + Settings + + + + Messages & media + + + +
+
+
+ {Array.from({ length: 10 }).map((_, i) => ( +
+ ))} +
+
+ + + + ) +} diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>