| 1 | import { SlateElement, type SlateElementProps } from "platejs/static"; |
| 2 | import React from "react"; |
| 3 | |
| 4 | import { cn } from "@/lib/utils"; |
| 5 | import { CycleContext } from "../cycle-element"; |
| 6 | |
| 7 | const RIGHT_COLUMN_ALIGNMENT = |
| 8 | "text-left [&_h1]:!text-left [&_h2]:!text-left [&_h3]:!text-left [&_h4]:!text-left [&_h5]:!text-left [&_h6]:!text-left [&_p]:!text-left [&_li]:!text-left"; |
| 9 | |
| 10 | const LEFT_COLUMN_ALIGNMENT = |
| 11 | "text-right [&_h1]:!text-right [&_h2]:!text-right [&_h3]:!text-right [&_h4]:!text-right [&_h5]:!text-right [&_h6]:!text-right [&_p]:!text-right [&_li]:!text-right"; |
| 12 | |
| 13 | export function CycleItemStatic(props: SlateElementProps) { |
| 14 | const { isMultiColumn, side } = React.useContext(CycleContext); |
| 15 | |
| 16 | return ( |
| 17 | <div className="group/cycle-item relative min-w-0"> |
| 18 | <div |
| 19 | className={cn( |
| 20 | "w-full rounded-md bg-(--presentation-card-background) px-3 py-2", |
| 21 | !isMultiColumn && "text-left", |
| 22 | isMultiColumn && side === "left" && LEFT_COLUMN_ALIGNMENT, |
| 23 | isMultiColumn && side === "right" && RIGHT_COLUMN_ALIGNMENT, |
| 24 | )} |
| 25 | data-bg-export="true" |
| 26 | > |
| 27 | <SlateElement className="min-w-0 flex-1" {...props}> |
| 28 | {props.children} |
| 29 | </SlateElement> |
| 30 | </div> |
| 31 | </div> |
| 32 | ); |
| 33 | } |
| 34 |