feat(header): add SettingsDialog and toggle its visibility via SettingsButton

src/app/dashboard/page.tsx

@@ -1,9 +0,0 @@
-import { SettingsDialog } from "@/components/settings-dialog"
-
-export default function Page() {
-  return (
-    <div className="flex h-svh items-center justify-center">
-      <SettingsDialog />
-    </div>
-  )
-}

src/components/header.tsx

@@ -1,6 +1,10 @@
+"use client";
+
 import { cn } from "@/lib/utils";
+import { useState } from "react";
 import RunCode from "./run-code";
 import SettingsButton from "./settings-button";
+import { SettingsDialog } from "./settings-dialog";
 
 interface HeaderProps {
   className?: string;
@@ -10,6 +14,12 @@ export function Header({
   className,
   ...props
 }: HeaderProps) {
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  const toggleDialog = () => {
+    setDialogOpen(!isDialogOpen);
+  };
+
   return (
     <header
       {...props}
@@ -20,7 +30,7 @@ export function Header({
           <div className="w-full flex items-center justify-between">
             <div className="flex items-center"></div>
             <div className="relative flex items-center gap-2">
-              <SettingsButton />
+              <SettingsButton onClick={toggleDialog} />
             </div>
           </div>
         </div>
@@ -32,6 +42,7 @@ export function Header({
           </div>
         </div>
       </div>
+      <SettingsDialog open={isDialogOpen} onClose={toggleDialog} />
     </header>
   );
 }

src/components/settings-button.tsx

@@ -1,16 +1,23 @@
 "use client";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
 import { cn } from "@/lib/utils";
 import { SettingsIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 
 interface SettingsButtonProps {
   className?: string;
+  onClick: () => void;
 }
 
 export default function SettingsButton({
   className,
+  onClick,
   ...props
 }: SettingsButtonProps) {
   return (
@@ -19,7 +26,8 @@ export default function SettingsButton({
         <TooltipTrigger asChild>
           <Button
             variant="ghost"
-            className={cn("h-8 w-auto p-2",className)}
+            className={cn("h-8 w-auto p-2", className)}
+            onClick={onClick}
             {...props}
           >
             <SettingsIcon size={16} aria-hidden="true" />

src/components/settings-dialog.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   Bell,
   Check,
@@ -14,7 +14,7 @@ import {
   Paintbrush,
   Settings,
   Video,
-} from "lucide-react"
+} from "lucide-react";
 
 import {
   Breadcrumb,
@@ -23,15 +23,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
+} from "@/components/ui/breadcrumb";
-import { Button } from "@/components/ui/button"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
-  DialogTrigger,
+} from "@/components/ui/dialog";
-} from "@/components/ui/dialog"
 import {
   Sidebar,
   SidebarContent,
@@ -41,7 +39,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 
 const data = {
   nav: [
@@ -58,16 +56,16 @@ const data = {
     { name: "Privacy & visibility", icon: Lock },
     { name: "Advanced", icon: Settings },
   ],
+};
+
+interface SettingsDialogProps {
+  open: boolean;
+  onClose: () => void;
 }
 
-export function SettingsDialog() {
+export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
-  const [open, setOpen] = React.useState(true)
-
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={onClose}>
-      <DialogTrigger asChild>
-        <Button size="sm">Open Dialog</Button>
-      </DialogTrigger>
       <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
         <DialogTitle className="sr-only">Settings</DialogTitle>
         <DialogDescription className="sr-only">
@@ -125,5 +123,5 @@ export function SettingsDialog() {
         </SidebarProvider>
       </DialogContent>
     </Dialog>
-  )
+  );
 }