| 1 | "use client"; |
| 2 | |
| 3 | import { ImageIcon, LayoutGridIcon, Settings, TypeIcon, X } from "lucide-react"; |
| 4 | |
| 5 | import { Button } from "@/components/ui/button"; |
| 6 | import { ScrollArea } from "@/components/ui/scroll-area"; |
| 7 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; |
| 8 | import { usePresentationState } from "@/states/presentation-state"; |
| 9 | import { AlignmentSection } from "./sections/AlignmentSection"; |
| 10 | import { FormatsSection } from "./sections/FormatsSection"; |
| 11 | import { PageBackgroundSection } from "./sections/PageBackgroundSection"; |
| 12 | import { PremiumFeaturesSection } from "./sections/PremiumFeaturesSection"; |
| 13 | import { ThemeSection } from "./sections/ThemeSection"; |
| 14 | import { TypographySizeSection } from "./sections/TypographySizeSection"; |
| 15 | import { WidthSection } from "./sections/WidthSection"; |
| 16 | |
| 17 | export function GlobalSettings() { |
| 18 | const setActiveRightPanel = usePresentationState( |
| 19 | (s) => s.setActiveRightPanel, |
| 20 | ); |
| 21 | |
| 22 | return ( |
| 23 | <div className="flex size-full flex-col bg-background"> |
| 24 | {/* Header */} |
| 25 | <div className="flex items-center justify-between border-b p-3 backdrop-blur-sm supports-backdrop-filter:bg-background/60"> |
| 26 | <div className="flex items-center gap-2"> |
| 27 | <Settings className="size-4 text-primary" /> |
| 28 | <h2 className="text-sm font-semibold tracking-wide">Page Setup</h2> |
| 29 | </div> |
| 30 | <Button |
| 31 | variant="ghost" |
| 32 | size="icon" |
| 33 | onClick={() => setActiveRightPanel(null)} |
| 34 | className="size-8 hover:bg-muted" |
| 35 | > |
| 36 | <X className="size-4" /> |
| 37 | </Button> |
| 38 | </div> |
| 39 | |
| 40 | {/* Content */} |
| 41 | <ScrollArea className="max-h-full flex-1 p-4"> |
| 42 | <Tabs defaultValue="cards" className="w-full"> |
| 43 | <TabsList className="w-full"> |
| 44 | <TabsTrigger value="cards" className="flex-1 gap-1.5"> |
| 45 | <LayoutGridIcon className="size-4" /> |
| 46 | Cards |
| 47 | </TabsTrigger> |
| 48 | <TabsTrigger value="theme" className="flex-1 gap-1.5"> |
| 49 | <TypeIcon className="size-4" /> |
| 50 | Theme |
| 51 | </TabsTrigger> |
| 52 | <TabsTrigger value="background" className="flex-1 gap-1.5"> |
| 53 | <ImageIcon className="size-4" /> |
| 54 | Background |
| 55 | </TabsTrigger> |
| 56 | </TabsList> |
| 57 | |
| 58 | <TabsContent value="cards" className="mt-6 space-y-4"> |
| 59 | <FormatsSection /> |
| 60 | <WidthSection /> |
| 61 | <AlignmentSection /> |
| 62 | <TypographySizeSection /> |
| 63 | <PremiumFeaturesSection /> |
| 64 | </TabsContent> |
| 65 | |
| 66 | <TabsContent value="theme" className="mt-6"> |
| 67 | <ThemeSection /> |
| 68 | </TabsContent> |
| 69 | |
| 70 | <TabsContent value="background" className="mt-6"> |
| 71 | <PageBackgroundSection /> |
| 72 | </TabsContent> |
| 73 | </Tabs> |
| 74 | </ScrollArea> |
| 75 | </div> |
| 76 | ); |
| 77 | } |
| 78 |