| 1 | "use client"; |
| 2 | |
| 3 | import { NodeApi, PathApi } from "platejs"; |
| 4 | import { SlateElement, type SlateElementProps } from "platejs/static"; |
| 5 | |
| 6 | import { cn } from "@/lib/utils"; |
| 7 | import { type TSlopeGroupElement } from "../../plugins/diagram-components-plugin"; |
| 8 | import { PresentationIcon } from "../presentation-icon"; |
| 9 | import { getSmartLayoutStepColor } from "../smart-layout-gradient"; |
| 10 | import { |
| 11 | getStaticDiagramTextAlignClass, |
| 12 | type StaticDiagramElement, |
| 13 | } from "./diagram-static-utils"; |
| 14 | |
| 15 | const SLOPE_MIN_HEIGHT_PX = 245; |
| 16 | const SLOPE_HEIGHT_STEP_PX = 42; |
| 17 | |
| 18 | export function SlopeItemStatic(props: SlateElementProps) { |
| 19 | const element = props.element as StaticDiagramElement; |
| 20 | const path = props.path ?? props.editor.api.findPath(props.element) ?? [0]; |
| 21 | const parentPath = PathApi.parent(path); |
| 22 | const parentElement = NodeApi.get(props.editor, parentPath) as |
| 23 | | TSlopeGroupElement |
| 24 | | undefined; |
| 25 | const index = path.at(-1) ?? 0; |
| 26 | const total = parentElement?.children?.length || 1; |
| 27 | |
| 28 | return ( |
| 29 | <div |
| 30 | className="group/slope-item relative flex w-44 shrink-0 grow-0 justify-center items-stretch" |
| 31 | style={{ marginTop: (total - 1 - index) * SLOPE_HEIGHT_STEP_PX }} |
| 32 | > |
| 33 | <div |
| 34 | className="relative flex w-full flex-col items-center rounded-t-full px-5 pb-8 pt-5 text-center" |
| 35 | style={ |
| 36 | { |
| 37 | background: getSmartLayoutStepColor(index, total), |
| 38 | minHeight: SLOPE_MIN_HEIGHT_PX, |
| 39 | "--presentation-heading": "var(--presentation-card-background)", |
| 40 | "--presentation-text": "var(--presentation-card-background)", |
| 41 | } as React.CSSProperties |
| 42 | } |
| 43 | data-bg-export="true" |
| 44 | > |
| 45 | <div className="mb-9 flex size-30 shrink-0 items-center justify-center rounded-full bg-(--presentation-background) text-(--presentation-muted-foreground)"> |
| 46 | <PresentationIcon |
| 47 | icon={element.icon} |
| 48 | fallbackIcon="FaLightbulb" |
| 49 | size={96} |
| 50 | /> |
| 51 | </div> |
| 52 | <SlateElement |
| 53 | {...props} |
| 54 | className={cn( |
| 55 | "min-w-0 w-full text-(--presentation-foreground) [&_h1]:text-2xl [&_h2]:text-2xl [&_h3]:text-2xl [&_h4]:text-xl [&_p]:mt-2 [&_p]:text-sm", |
| 56 | "[&_:is(.presentation-heading)]:[-webkit-background-clip:unset!important;]", |
| 57 | "[&_:is(.presentation-heading)]:[-webkit-text-fill-color:unset!important;]", |
| 58 | "[&_:is(.presentation-heading)]:[background-clip:unset!important;]", |
| 59 | "[&_:is(.presentation-heading)]:[background:none!important;]", |
| 60 | "[&_:is(.presentation-heading)]:text-(--presentation-text)!", |
| 61 | getStaticDiagramTextAlignClass(element.alignment), |
| 62 | )} |
| 63 | > |
| 64 | {props.children} |
| 65 | </SlateElement> |
| 66 | </div> |
| 67 | </div> |
| 68 | ); |
| 69 | } |
| 70 |