| 1 | import { SlateElement, type SlateElementProps } from "platejs/static"; |
| 2 | import type * as React from "react"; |
| 3 | |
| 4 | import { cn } from "@/lib/utils"; |
| 5 | import { type TLabelElement } from "../../lib"; |
| 6 | |
| 7 | function getJustifyClass(alignment: TLabelElement["alignment"]) { |
| 8 | if (alignment === "left") return "justify-start"; |
| 9 | if (alignment === "right") return "justify-end"; |
| 10 | return "justify-center"; |
| 11 | } |
| 12 | |
| 13 | export function LabelStatic(props: SlateElementProps<TLabelElement>) { |
| 14 | const alignment = props.element.alignment ?? "left"; |
| 15 | const textColor = |
| 16 | props.element.textColor ?? |
| 17 | props.element.color ?? |
| 18 | "var(--presentation-background)"; |
| 19 | const backgroundColor = |
| 20 | props.element.backgroundColor ?? "var(--presentation-primary)"; |
| 21 | const style = { |
| 22 | "--presentation-label-background": backgroundColor, |
| 23 | "--presentation-label-color": textColor, |
| 24 | } as React.CSSProperties; |
| 25 | |
| 26 | return ( |
| 27 | <SlateElement |
| 28 | {...props} |
| 29 | className={cn("relative my-1 flex w-full", getJustifyClass(alignment))} |
| 30 | style={style} |
| 31 | > |
| 32 | <div className="inline-flex max-w-full rounded-full border border-(--presentation-label-color)/35 bg-(--presentation-label-background) px-3 py-1 text-xs font-bold tracking-normal text-(--presentation-label-color) uppercase"> |
| 33 | {props.children} |
| 34 | </div> |
| 35 | </SlateElement> |
| 36 | ); |
| 37 | } |
| 38 |