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