44 lines
1.3 KiB
TypeScript
44 lines
1.3 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";
|
|
import { useJsonDoc } from "~/hooks/useJsonDoc";
|
|
|
|
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 { minimal } = useJsonDoc();
|
|
const iconColor = useMemo(() => colorForItemAtPath(id, json), [id, json]);
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
"column flex-none 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="text-ellipsis overflow-hidden">{title}</Title>
|
|
</div>
|
|
<div
|
|
className={`overflow-y-auto ${
|
|
minimal ? "h-viewerHeightMinimal" : "h-viewerHeight"
|
|
} no-scrollbar`}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const Column = memo(ColumnElement);
|