mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2026-05-02 23:59:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

menus

Browse Source
This commit is contained in:
Guy Ben-Aharon
2024-08-10 14:46:31 +03:00
parent dd84b9cd06
commit 4f84fd1065
1 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor-page/canvas/table-node.tsx
+28 -5
View File
@@ -1,6 +1,8 @@
import React from 'react';
import { randomHSLA } from '@/lib/utils';
import { Handle, Position, NodeProps, Node } from '@xyflow/react';
import { Button } from '@/components/button/button';
import { Ellipsis, Trash2 } from 'lucide-react';
export type TableNodeProps = Node<Record<string, never>, 'table'>;
@@ -12,7 +14,7 @@ export const TableNode: React.FC<NodeProps<TableNodeProps>> = ({
const focused = selected && !dragging;
const renderColumn = () => (
<div className="flex relative items-center h-8 text-sm px-3 border-t justify-between hover:bg-secondary">
<div className="flex relative items-center h-8 text-sm px-3 border-t justify-between hover:bg-primary-foreground group last:rounded-b-lg">
{focused ? (
<Handle
className="!h-3 !w-3 !bg-slate-400"
@@ -21,8 +23,21 @@ export const TableNode: React.FC<NodeProps<TableNodeProps>> = ({
isConnectable={true}
/>
) : null}
<div>id</div>
<div className="text-muted-foreground">bigint</div>
<div className="flex">id</div>
<div className="flex">
<div className="text-muted-foreground flex group-hover:hidden">
bigint
</div>
<div className="flex-row hidden group-hover:flex">
<Button
variant="ghost"
className="hover:bg-primary-foreground p-0 w-6 h-6"
>
<Trash2 className="h-3.5 w-3.5 text-red-700" />
</Button>
</div>
</div>
{focused ? (
<Handle
className="!h-3 !w-3 !bg-slate-400"
@@ -42,8 +57,16 @@ export const TableNode: React.FC<NodeProps<TableNodeProps>> = ({
className="h-2 rounded-t-lg"
style={{ backgroundColor: tableColor }}
></div>
<div className="flex items-center h-9 text-sm font-bold bg-secondary px-2">
table_1
<div className="flex items-center h-9 bg-secondary px-2 justify-between group">
<div className="flex text-sm font-bold">table_1</div>
<div className="flex-row hidden group-hover:flex">
<Button
variant="ghost"
className="hover:bg-primary-foreground p-0 w-6 h-6 text-slate-500 hover:text-slate-700"
>
<Ellipsis className="h-4 w-4" />
</Button>
</div>
</div>
{renderColumn()}
{renderColumn()}