| 1 | "use client"; |
| 2 | |
| 3 | import { PlateElement, type PlateElementProps } from "platejs/react"; |
| 4 | import type * as React from "react"; |
| 5 | |
| 6 | import { cn } from "@/lib/utils"; |
| 7 | import { type TLabelElement } from "../lib"; |
| 8 | |
| 9 | function getJustifyClass(alignment: TLabelElement["alignment"]) { |
| 10 | if (alignment === "left") return "justify-start"; |
| 11 | if (alignment === "right") return "justify-end"; |
| 12 | return "justify-center"; |
| 13 | } |
| 14 | |
| 15 | export default function LabelElement({ |
| 16 | attributes, |
| 17 | ...props |
| 18 | }: PlateElementProps<TLabelElement>) { |
| 19 | const alignment = props.element.alignment ?? "left"; |
| 20 | const backgroundColor = |
| 21 | props.element.backgroundColor ?? "var(--presentation-primary)"; |
| 22 | const textColor = |
| 23 | props.element.textColor ?? |
| 24 | props.element.color ?? |
| 25 | "var(--presentation-background)"; |
| 26 | const style = { |
| 27 | "--presentation-label-accent": backgroundColor, |
| 28 | "--presentation-label-background": backgroundColor, |
| 29 | "--presentation-label-color": textColor, |
| 30 | } as React.CSSProperties; |
| 31 | |
| 32 | return ( |
| 33 | <PlateElement |
| 34 | {...props} |
| 35 | className={cn( |
| 36 | "slate-selectable relative my-1 flex w-full", |
| 37 | getJustifyClass(alignment), |
| 38 | )} |
| 39 | style={style} |
| 40 | attributes={{ |
| 41 | ...attributes, |
| 42 | "data-plate-open-context-menu": true, |
| 43 | }} |
| 44 | > |
| 45 | <div className="inline-flex max-w-full rounded-full border border-(--presentation-label-accent)/45 bg-(--presentation-label-background) px-3 py-1 text-xs font-bold tracking-normal text-(--presentation-label-color) uppercase"> |
| 46 | {props.children} |
| 47 | </div> |
| 48 | </PlateElement> |
| 49 | ); |
| 50 | } |
| 51 |