| 1 | // File: components/notebook/presentation/components/theme/create-theme/PreviewSection.tsx |
| 2 | |
| 3 | "use client"; |
| 4 | |
| 5 | import { type RefObject } from "react"; |
| 6 | |
| 7 | import { type ThemeProperties } from "@/lib/presentation/themes"; |
| 8 | import { cn } from "@/lib/utils"; |
| 9 | import { type PlateSlide } from "../../../utils/parser"; |
| 10 | import { ThemeBackground } from "../ThemeBackground"; |
| 11 | import { type PreviewTab } from "./create-theme-types"; |
| 12 | import { SlidePreview } from "./SlidePreview"; |
| 13 | |
| 14 | interface PreviewSectionProps { |
| 15 | containerRef: RefObject<HTMLDivElement | null>; |
| 16 | previewTab: PreviewTab; |
| 17 | previewTabs?: PreviewTab[]; |
| 18 | previewThemeData: ThemeProperties; |
| 19 | slidesToDisplay: PlateSlide[]; |
| 20 | onTabChange: (tab: PreviewTab) => void; |
| 21 | } |
| 22 | |
| 23 | export function PreviewSection({ |
| 24 | containerRef, |
| 25 | previewTab, |
| 26 | previewTabs = ["test", "current"], |
| 27 | previewThemeData, |
| 28 | slidesToDisplay, |
| 29 | onTabChange, |
| 30 | }: PreviewSectionProps) { |
| 31 | return ( |
| 32 | <div |
| 33 | ref={containerRef} |
| 34 | className="flex min-w-0 flex-1 flex-col overflow-hidden bg-muted/30 lg:w-1/2" |
| 35 | > |
| 36 | {/* Preview Header */} |
| 37 | {previewTabs.length > 1 && ( |
| 38 | <div className="flex w-full flex-wrap items-center justify-between gap-3 border-b border-border p-4"> |
| 39 | <div className="flex gap-2"> |
| 40 | {previewTabs.map((tab) => ( |
| 41 | <button |
| 42 | key={tab} |
| 43 | onClick={() => onTabChange(tab)} |
| 44 | className={cn( |
| 45 | "rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors", |
| 46 | previewTab === tab |
| 47 | ? "bg-blue-600 text-white" |
| 48 | : "text-muted-foreground hover:text-foreground", |
| 49 | )} |
| 50 | type="button" |
| 51 | > |
| 52 | {tab === "test" ? "Test page" : "Current page"} |
| 53 | </button> |
| 54 | ))} |
| 55 | </div> |
| 56 | </div> |
| 57 | )} |
| 58 | |
| 59 | {/* Preview Content */} |
| 60 | <ThemeBackground |
| 61 | className="w-full" |
| 62 | themeDataOverride={previewThemeData} |
| 63 | suppressThemeUpdates={true} |
| 64 | ignorePageBackgroundOverride={true} |
| 65 | > |
| 66 | <div className="flex h-[calc(100dvh-65px)] w-full justify-center overflow-x-clip overflow-y-auto px-4 py-6 pb-20"> |
| 67 | <div className="min-h-full w-full space-y-2"> |
| 68 | {slidesToDisplay.map((slide) => ( |
| 69 | <SlidePreview |
| 70 | key={slide.id} |
| 71 | slide={slide} |
| 72 | containerRef={containerRef} |
| 73 | /> |
| 74 | ))} |
| 75 | {slidesToDisplay.length === 0 && ( |
| 76 | <div className="rounded-lg bg-background p-8 text-center shadow-lg"> |
| 77 | <p className="text-muted-foreground"> |
| 78 | {previewTab === "current" |
| 79 | ? "No slides available. Create some slides first." |
| 80 | : "No test slides available."} |
| 81 | </p> |
| 82 | </div> |
| 83 | )} |
| 84 | </div> |
| 85 | </div> |
| 86 | </ThemeBackground> |
| 87 | </div> |
| 88 | ); |
| 89 | } |
| 90 |