返回 presentation-ai
present-mode-styles.ts
根目录 / src / components / presentation / present-mode / present-mode-styles.ts
1 import { type PlateSlide } from "@/components/notebook/presentation/utils/parser";
2
3 /**
4 * Common style constants for present mode components.
5 * These can be used across SlideWrapper and other components
6 * to maintain consistent styling.
7 */
8
9 /**
10 * Classes applied to the slide wrapper when in present mode (presentation/fluid format).
11 * Creates a fixed fullscreen overlay with centered content, scrollable.
12 */
13 const PRESENT_MODE_OVERLAY_CLASSES =
14 "fixed inset-0 pb-0 grid place-items-center overflow-y-auto overflow-x-hidden max-h-dvh w-dvw";
15
16 /**
17 * Classes applied to the slide wrapper when in present mode (social format).
18 * Creates a fixed fullscreen overlay with horizontally centered content, scrollable.
19 */
20 const PRESENT_MODE_OVERLAY_CLASSES_SOCIAL =
21 "fixed inset-0 pb-0 flex flex-col items-center overflow-y-auto overflow-x-hidden max-h-dvh w-dvw";
22
23 /**
24 * Classes for the slide content container in present mode (presentation format).
25 * Ensures content scales from top center.
26 */
27 const PRESENT_MODE_SLIDE_CLASSES = "origin-top";
28
29 /**
30 * Classes for the slide content container in present mode (social format).
31 * Ensures content scales from center and is centered within the container.
32 */
33 const PRESENT_MODE_SLIDE_CLASSES_SOCIAL = "origin-top my-auto";
34
35 /**
36 * Get the appropriate overlay classes based on format category.
37 * @param formatCategory - The slide format category
38 * @returns CSS classes for the overlay container
39 */
40 export function getPresentModeOverlayClasses(
41 formatCategory: PlateSlide["formatCategory"] = "presentation",
42 ): string {
43 if (formatCategory === "social") {
44 return PRESENT_MODE_OVERLAY_CLASSES_SOCIAL;
45 }
46 return PRESENT_MODE_OVERLAY_CLASSES;
47 }
48
49 /**
50 * Get the appropriate slide content classes based on format category.
51 * @param formatCategory - The slide format category
52 * @returns CSS classes for the slide content container
53 */
54 export function getPresentModeSlideClasses(
55 formatCategory: PlateSlide["formatCategory"] = "presentation",
56 ): string {
57 if (formatCategory === "social") {
58 return PRESENT_MODE_SLIDE_CLASSES_SOCIAL;
59 }
60 return PRESENT_MODE_SLIDE_CLASSES;
61 }
62
62 lines TYPESCRIPT