36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Title } from "./Primitives/Title";
|
|
import { colorForItemAtPath } from "~/utilities/colors";
|
|
import { IconComponent } from "~/useColumnView";
|
|
import { useJson } from "../hooks/useJson";
|
|
import { memo, useMemo } from "react";
|
|
|
|
export type ColumnProps = {
|
|
id: string;
|
|
title: string;
|
|
icon?: IconComponent;
|
|
hasHighlightedElement: boolean;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
function ColumnElement(column: ColumnProps) {
|
|
const { id, title, children } = column;
|
|
const [json] = useJson();
|
|
const iconColor = useMemo(() => colorForItemAtPath(id, json), [id, json]);
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
"column flex-none overflow-x-auto no-scrollbar border-r-[1px] border-slate-300 w-80 transition dark:border-slate-600"
|
|
}
|
|
>
|
|
<div className="flex items-center text-slate-800 bg-slate-50 mb-[3px] p-2 pb-0 transition dark:bg-slate-900 dark:text-slate-300">
|
|
{column.icon && <column.icon className="h-6 w-6 mr-1" />}
|
|
<Title className="">{title}</Title>
|
|
</div>
|
|
<div className="h-full">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const Column = memo(ColumnElement);
|