import { ChevronRightIcon } from "@heroicons/react/outline"; import { Mono } from "./Primitives/Mono"; import { memo, useEffect, useMemo, useRef } from "react"; import { ColumnViewNode } from "~/useColumnView"; import { colorForItemAtPath } from "~/utilities/colors"; import { Body } from "./Primitives/Body"; export type ColumnItemProps = { item: ColumnViewNode; json: unknown; isSelected: boolean; isHighlighted: boolean; onClick?: (id: string) => void; }; function ColumnItemElement({ item, json, isSelected, isHighlighted, onClick, }: ColumnItemProps) { const htmlElement = useRef(null); const showArrow = item.children.length > 0; const stateStyle = useMemo(() => { if (isHighlighted) { return "bg-slate-300 text-slate-700 hover:bg-slate-400 hover:bg-opacity-60 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[15%] dark:text-slate-100"; } if (isSelected) { return "bg-slate-200 hover:bg-slate-300 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[5%] dark:hover:bg-white dark:hover:bg-opacity-[10%] dark:text-slate-200"; } return "hover:bg-slate-100 transition duration-75 ease-out dark:hover:bg-white dark:hover:bg-opacity-[5%] dark:text-slate-400"; }, [isSelected, isHighlighted]); const iconColor = useMemo( () => colorForItemAtPath(item.id, json), [item.id, json] ); useEffect(() => { if (isSelected || isHighlighted) { htmlElement.current?.scrollIntoView({ block: "nearest", inline: "center", }); } }, [isSelected, isHighlighted]); return (

onClick && onClick(item.id)} ref={htmlElement} >

{item.icon && ( )}

{item.title} {item.subtitle && ( {item.subtitle} )}

{showArrow && ( )}

); } export const ColumnItem = memo(ColumnItemElement);