| 1 | "use client"; |
| 2 | |
| 3 | import { testSlides } from "@/components/notebook/presentation/components/theme/create-theme/test-slide"; |
| 4 | import { ScaledSlide } from "@/components/notebook/presentation/components/theme/ScaledSlide"; |
| 5 | import { ThemeBackground } from "@/components/notebook/presentation/components/theme/ThemeBackground"; |
| 6 | import { type ThemeProperties } from "@/lib/presentation/themes"; |
| 7 | |
| 8 | interface ThemeModalPreviewProps { |
| 9 | selectedThemeData: ThemeProperties | null; |
| 10 | } |
| 11 | |
| 12 | const SLIDE_WIDTH = 1000; |
| 13 | const SCALE = 0.53; |
| 14 | |
| 15 | /** |
| 16 | * Right panel preview section showing scaled slides with the selected theme |
| 17 | */ |
| 18 | export function ThemeModalPreview({ |
| 19 | selectedThemeData, |
| 20 | }: ThemeModalPreviewProps) { |
| 21 | return ( |
| 22 | <div className="hidden h-full min-h-0 flex-col overflow-y-auto bg-muted/30 lg:flex lg:basis-[60%]"> |
| 23 | {/* Preview Header */} |
| 24 | <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border p-4"> |
| 25 | <h2 className="text-lg font-semibold">Preview</h2> |
| 26 | </div> |
| 27 | |
| 28 | {/* Preview Content */} |
| 29 | <div className="scrollbar-thin min-h-0 flex-1 overflow-auto p-4 scrollbar-thumb-accent scrollbar-track-transparent"> |
| 30 | {selectedThemeData && ( |
| 31 | <ThemeBackground |
| 32 | themeDataOverride={selectedThemeData} |
| 33 | suppressThemeUpdates={true} |
| 34 | ignorePageBackgroundOverride={true} |
| 35 | > |
| 36 | <div className="flex flex-col items-center gap-4 py-4"> |
| 37 | {testSlides.map((slide) => ( |
| 38 | <ScaledSlide |
| 39 | key={slide.id} |
| 40 | slide={slide} |
| 41 | slideWidth={SLIDE_WIDTH} |
| 42 | scale={SCALE} |
| 43 | /> |
| 44 | ))} |
| 45 | </div> |
| 46 | </ThemeBackground> |
| 47 | )} |
| 48 | </div> |
| 49 | </div> |
| 50 | ); |
| 51 | } |
| 52 |