| 1 | import { SlateElement, type SlateElementProps } from "platejs/static"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | |
| 5 | const GAP_CLASS_BY_SIZE = { |
| 6 | sm: "gap-2", |
| 7 | md: "gap-4", |
| 8 | lg: "gap-8", |
| 9 | xl: "gap-12", |
| 10 | none: "gap-0", |
| 11 | } as const; |
| 12 | |
| 13 | const JUSTIFY_CLASS_BY_VALUE = { |
| 14 | start: "justify-start", |
| 15 | center: "justify-center", |
| 16 | end: "justify-end", |
| 17 | between: "justify-between", |
| 18 | around: "justify-around", |
| 19 | evenly: "justify-evenly", |
| 20 | } as const; |
| 21 | |
| 22 | const ALIGN_CLASS_BY_VALUE = { |
| 23 | start: "items-start", |
| 24 | center: "items-center", |
| 25 | end: "items-end", |
| 26 | stretch: "items-stretch", |
| 27 | baseline: "items-baseline", |
| 28 | } as const; |
| 29 | |
| 30 | export default function FlexBoxStatic(props: SlateElementProps) { |
| 31 | const { |
| 32 | align = "center", |
| 33 | justify = "center", |
| 34 | gap = "md", |
| 35 | } = props.element as { |
| 36 | align?: "start" | "center" | "end" | "stretch" | "baseline"; |
| 37 | justify?: "start" | "center" | "end" | "between" | "around" | "evenly"; |
| 38 | gap?: "sm" | "md" | "lg" | "xl" | "none"; |
| 39 | }; |
| 40 | |
| 41 | return ( |
| 42 | <SlateElement {...props} className="mb-4"> |
| 43 | <div |
| 44 | className={cn( |
| 45 | "flex w-full flex-wrap", |
| 46 | GAP_CLASS_BY_SIZE[gap] || "gap-4", |
| 47 | JUSTIFY_CLASS_BY_VALUE[justify] || "justify-center", |
| 48 | ALIGN_CLASS_BY_VALUE[align] || "items-center", |
| 49 | )} |
| 50 | > |
| 51 | {props.children} |
| 52 | </div> |
| 53 | </SlateElement> |
| 54 | ); |
| 55 | } |
| 56 |