| 1 | "use client"; |
| 2 | |
| 3 | import { PlateElement, type StyledPlateElementProps } from "platejs/react"; |
| 4 | import React from "react"; |
| 5 | |
| 6 | import { cn } from "@/lib/utils"; |
| 7 | import { type TCycleItemElement } from "../plugins/cycle-plugin"; |
| 8 | import { CycleContext } from "./cycle-element"; |
| 9 | |
| 10 | const RIGHT_COLUMN_ALIGNMENT = |
| 11 | "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"; |
| 12 | |
| 13 | const LEFT_COLUMN_ALIGNMENT = |
| 14 | "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"; |
| 15 | |
| 16 | export const CycleItem = ( |
| 17 | props: StyledPlateElementProps<TCycleItemElement>, |
| 18 | ) => { |
| 19 | const { isMultiColumn, side } = React.useContext(CycleContext); |
| 20 | return ( |
| 21 | <PlateElement |
| 22 | {...props} |
| 23 | className="group group/cycle-item relative min-w-0" |
| 24 | > |
| 25 | <div |
| 26 | data-bg-export="true" |
| 27 | className={cn( |
| 28 | "w-full rounded-md bg-(--presentation-card-background) px-3 py-2", |
| 29 | !isMultiColumn && "text-left", |
| 30 | isMultiColumn && side === "left" && LEFT_COLUMN_ALIGNMENT, |
| 31 | isMultiColumn && side === "right" && RIGHT_COLUMN_ALIGNMENT, |
| 32 | )} |
| 33 | > |
| 34 | <div className="min-w-0 flex-1">{props.children}</div> |
| 35 | </div> |
| 36 | </PlateElement> |
| 37 | ); |
| 38 | }; |
| 39 |