From 3da0c2e736f87bb884b69a3c84b56e2fcfe76e58 Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Thu, 8 Aug 2024 16:42:33 +0300
Subject: [PATCH] table columns

---
 src/components/accordion/accordion.tsx        |  55 +++++
 src/components/combobox/combobox.tsx          | 190 ++++++++++++++++++
 src/components/command/command.tsx            | 156 ++++++++++++++
 src/components/command/dialog.tsx             | 120 +++++++++++
 src/components/dialog/dialog.tsx              | 120 +++++++++++
 src/components/input/input.tsx                |  25 +++
 src/components/popover/popover.tsx            |  31 +++
 src/components/scroll-area/scroll-area.tsx    |  48 +++++
 src/lib/utils.ts                              |   3 +
 .../table-list-item-content.tsx               |  85 ++++++++
 .../table-list-item-header-button.tsx         |  12 ++
 .../table-list-item-header.tsx                |  28 +++
 .../table-list-item/table-list-item.tsx       |  30 +++
 .../tables-section/table-list/table-list.tsx  |  15 ++
 .../tables-section/tables-section.tsx         |   7 +-
 15 files changed, 924 insertions(+), 1 deletion(-)
 create mode 100644 src/components/accordion/accordion.tsx
 create mode 100644 src/components/combobox/combobox.tsx
 create mode 100644 src/components/command/command.tsx
 create mode 100644 src/components/command/dialog.tsx
 create mode 100644 src/components/dialog/dialog.tsx
 create mode 100644 src/components/input/input.tsx
 create mode 100644 src/components/popover/popover.tsx
 create mode 100644 src/components/scroll-area/scroll-area.tsx
 create mode 100644 src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
 create mode 100644 src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header-button/table-list-item-header-button.tsx
 create mode 100644 src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
 create mode 100644 src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx
 create mode 100644 src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
new file mode 100644
index 00000000..f2cf8abb
--- /dev/null
+++ b/src/components/accordion/accordion.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn('border-b', className)}
+        {...props}
+    />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex flex-1 items-center py-4 gap-x-2 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+                className
+            )}
+            {...props}
+        >
+            <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            {children}
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+        {...props}
+    >
+        <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
new file mode 100644
index 00000000..90fdd474
--- /dev/null
+++ b/src/components/combobox/combobox.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/button/button';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/components/command/command';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/popover/popover';
+import { ScrollArea } from '@/components/scroll-area/scroll-area';
+
+export type ComboboxOptions = {
+    value: string;
+    label: string;
+};
+
+type Mode = 'single' | 'multiple';
+
+interface ComboboxProps {
+    mode?: Mode;
+    options: ComboboxOptions[];
+    selected: string | string[]; // Updated to handle multiple selections
+    className?: string;
+    placeholder?: string;
+    onChange?: (event: string | string[]) => void; // Updated to handle multiple selections
+    onCreate?: (value: string) => void;
+    emptyText?: string;
+}
+
+export function Combobox({
+    options,
+    selected,
+    className,
+    placeholder,
+    mode = 'single',
+    emptyText,
+    onChange,
+    onCreate,
+}: ComboboxProps) {
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState<string>('');
+
+    return (
+        <div className={cn('block', className)}>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        key={'combobox-trigger'}
+                        type="button"
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={open}
+                        className="w-full justify-between h-auto"
+                    >
+                        {selected && selected.length > 0 ? (
+                            <div className="relative mr-auto flex flex-grow flex-wrap items-center overflow-hidden">
+                                <span>
+                                    {mode === 'multiple' &&
+                                    Array.isArray(selected)
+                                        ? selected
+                                              .map(
+                                                  (selectedValue: string) =>
+                                                      options.find(
+                                                          (item) =>
+                                                              item.value ===
+                                                              selectedValue
+                                                      )?.label
+                                              )
+                                              .join(', ')
+                                        : mode === 'single' &&
+                                          options.find(
+                                              (item) => item.value === selected
+                                          )?.label}
+                                </span>
+                            </div>
+                        ) : (
+                            <div className="font-normal	text-gray-500">
+                                {placeholder ?? 'Select Item...'}
+                            </div>
+                        )}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-48 max-w-sm p-0">
+                    <Command
+                        filter={(value, search) => {
+                            if (value.includes(search)) return 1;
+                            return 0;
+                        }}
+                        // shouldFilter={true}
+                    >
+                        <CommandInput
+                            placeholder={placeholder ?? 'Cari Item...'}
+                            value={query}
+                            onValueChange={(value: string) => setQuery(value)}
+                        />
+                        {onCreate ? (
+                            <CommandEmpty
+                                onClick={() => {
+                                    if (onCreate) {
+                                        onCreate(query);
+                                        setQuery('');
+                                    }
+                                }}
+                                className="flex cursor-pointer items-center justify-center gap-1 italic"
+                            >
+                                <p>Create: </p>
+                                <p className="block max-w-48 truncate font-semibold text-primary">
+                                    {query}
+                                </p>
+                            </CommandEmpty>
+                        ) : (
+                            <CommandEmpty>
+                                {emptyText ?? 'No option found.'}
+                            </CommandEmpty>
+                        )}
+
+                        <ScrollArea>
+                            <div className="max-h-80">
+                                <CommandGroup>
+                                    <CommandList>
+                                        {options.map((option) => (
+                                            <CommandItem
+                                                key={option.label}
+                                                value={option.label}
+                                                onSelect={() => {
+                                                    if (onChange) {
+                                                        if (
+                                                            mode ===
+                                                                'multiple' &&
+                                                            Array.isArray(
+                                                                selected
+                                                            )
+                                                        ) {
+                                                            onChange(
+                                                                selected.includes(
+                                                                    option.value
+                                                                )
+                                                                    ? selected.filter(
+                                                                          (
+                                                                              item
+                                                                          ) =>
+                                                                              item !==
+                                                                              option.value
+                                                                      )
+                                                                    : [
+                                                                          ...selected,
+                                                                          option.value,
+                                                                      ]
+                                                            );
+                                                        } else {
+                                                            onChange(
+                                                                option.value
+                                                            );
+                                                        }
+                                                    }
+                                                }}
+                                            >
+                                                <Check
+                                                    className={cn(
+                                                        'mr-2 h-4 w-4',
+                                                        selected.includes(
+                                                            option.value
+                                                        )
+                                                            ? 'opacity-100'
+                                                            : 'opacity-0'
+                                                    )}
+                                                />
+                                                {option.label}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandList>
+                                </CommandGroup>
+                            </div>
+                        </ScrollArea>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}
diff --git a/src/components/command/command.tsx b/src/components/command/command.tsx
new file mode 100644
index 00000000..d22a1651
--- /dev/null
+++ b/src/components/command/command.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/dialog/dialog';
+
+const Command = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive
+        ref={ref}
+        className={cn(
+            'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+    return (
+        <Dialog {...props}>
+            <DialogContent className="overflow-hidden p-0">
+                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+const CommandInput = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Input>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+    <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
+        <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <CommandPrimitive.Input
+            ref={ref}
+            className={cn(
+                'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            {...props}
+        />
+    </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.List
+        ref={ref}
+        className={cn(
+            'max-h-[300px] overflow-y-auto overflow-x-hidden',
+            className
+        )}
+        {...props}
+    />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Empty>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+    <CommandPrimitive.Empty
+        ref={ref}
+        className="py-6 text-center text-sm"
+        {...props}
+    />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Group>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Group
+        ref={ref}
+        className={cn(
+            'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-1 h-px bg-border', className)}
+        {...props}
+    />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+            className
+        )}
+        {...props}
+    />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn(
+                'ml-auto text-xs tracking-widest text-muted-foreground',
+                className
+            )}
+            {...props}
+        />
+    );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};
diff --git a/src/components/command/dialog.tsx b/src/components/command/dialog.tsx
new file mode 100644
index 00000000..457e32d1
--- /dev/null
+++ b/src/components/command/dialog.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col space-y-1.5 text-center sm:text-left',
+            className
+        )}
+        {...props}
+    />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            className
+        )}
+        {...props}
+    />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            'text-lg font-semibold leading-none tracking-tight',
+            className
+        )}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
new file mode 100644
index 00000000..457e32d1
--- /dev/null
+++ b/src/components/dialog/dialog.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col space-y-1.5 text-center sm:text-left',
+            className
+        )}
+        {...props}
+    />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            className
+        )}
+        {...props}
+    />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            'text-lg font-semibold leading-none tracking-tight',
+            className
+        )}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
new file mode 100644
index 00000000..ca6fc739
--- /dev/null
+++ b/src/components/input/input.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
new file mode 100644
index 00000000..f621e461
--- /dev/null
+++ b/src/components/popover/popover.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+            )}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/scroll-area/scroll-area.tsx b/src/components/scroll-area/scroll-area.tsx
new file mode 100644
index 00000000..f32e97b9
--- /dev/null
+++ b/src/components/scroll-area/scroll-area.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn('relative overflow-hidden', className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    >
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            'flex touch-none select-none transition-colors',
+            orientation === 'vertical' &&
+                'h-full w-2.5 border-l border-l-transparent p-[1px]',
+            orientation === 'horizontal' &&
+                'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index dd53ea89..0e85dc04 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,6 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export const randomHSLA = () =>
+    `hsla(${~~(360 * Math.random())}, 70%, 72%, 0.8)`;
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
new file mode 100644
index 00000000..072a40de
--- /dev/null
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Ellipsis } from 'lucide-react';
+import { Input } from '@/components/input/input';
+import { Combobox } from '@/components/combobox/combobox';
+import { Button } from '@/components/button/button';
+import { KeyRound } from 'lucide-react';
+
+export interface TableListItemContentProps {
+    tableColor: string;
+}
+
+export const TableListItemContent: React.FC<TableListItemContentProps> = ({
+    tableColor,
+}) => {
+    const renderColumn = () => {
+        return (
+            <div className="flex flex-row p-1 justify-between flex-1">
+                <div className="flex basis-8/12 gap-1">
+                    <Input
+                        type="text"
+                        placeholder="Name"
+                        className="h-8 focus-visible:ring-0 basis-8/12"
+                    />
+                    <Combobox
+                        className="flex h-8 basis-4/12"
+                        mode="single"
+                        options={[
+                            {
+                                label: 'small_int',
+                                value: 'smallint',
+                            },
+                            {
+                                label: 'json',
+                                value: 'json',
+                            },
+                            {
+                                label: 'jsonb',
+                                value: 'jsonb',
+                            },
+                            {
+                                label: 'varchar',
+                                value: 'varchar',
+                            },
+                        ]}
+                        placeholder="Type"
+                        selected={''}
+                        onChange={(value) => console.log(value)}
+                        emptyText="No types found."
+                    />
+                </div>
+                <div className="flex">
+                    <Button
+                        variant="ghost"
+                        className="hover:bg-primary-foreground p-2 w-[32px] text-slate-500 hover:text-slate-700 text-xs h-8"
+                    >
+                        N
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        className="hover:bg-primary-foreground p-2 w-[32px] text-slate-500 hover:text-slate-700 h-8"
+                    >
+                        <KeyRound className="h-3.5" />
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        className="hover:bg-primary-foreground p-2 w-[32px] text-slate-500 hover:text-slate-700 h-8"
+                    >
+                        <Ellipsis className="h-3.5" />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div
+            className="border-l-[6px] rounded-b-md"
+            style={{
+                borderColor: tableColor,
+            }}
+        >
+            {renderColumn()}
+        </div>
+    );
+};
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header-button/table-list-item-header-button.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header-button/table-list-item-header-button.tsx
new file mode 100644
index 00000000..de4290ed
--- /dev/null
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header-button/table-list-item-header-button.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, ButtonProps } from '@/components/button/button';
+
+export const TableListItemHeaderButton: React.FC<ButtonProps> = (props) => {
+    return (
+        <Button
+            variant="ghost"
+            className="hover:bg-primary-foreground p-2 w-[34px] text-slate-500 hover:text-slate-700"
+            {...props}
+        />
+    );
+};
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
new file mode 100644
index 00000000..22c9f854
--- /dev/null
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { CircleDotDashed, Pencil, EllipsisVertical } from 'lucide-react';
+import { TableListItemHeaderButton } from './table-list-item-header-button/table-list-item-header-button';
+
+export interface TableListItemHeaderProps {}
+
+export const TableListItemHeader: React.FC<TableListItemHeaderProps> = () => {
+    return (
+        <div className="h-[44px] flex items-center justify-between flex-1 group">
+            <div>table_1</div>
+            <div className="flex flex-row-reverse">
+                <div>
+                    <TableListItemHeaderButton>
+                        <EllipsisVertical />
+                    </TableListItemHeaderButton>
+                </div>
+                <div className="hidden group-hover:flex flex-row-reverse">
+                    <TableListItemHeaderButton>
+                        <Pencil />
+                    </TableListItemHeaderButton>
+                    <TableListItemHeaderButton>
+                        <CircleDotDashed />
+                    </TableListItemHeaderButton>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx
new file mode 100644
index 00000000..55685cb2
--- /dev/null
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/accordion/accordion';
+import { randomHSLA } from '@/lib/utils';
+import { TableListItemHeader } from './table-list-item-header/table-list-item-header';
+import { TableListItemContent } from './table-list-item-content/table-list-item-content';
+
+export interface TableListItemProps {}
+
+export const TableListItem: React.FC<TableListItemProps> = () => {
+    const tableColor = randomHSLA();
+    return (
+        <AccordionItem value="item-1">
+            <AccordionTrigger
+                className="hover:no-underline hover:bg-accent rounded-md px-2 border-l-[6px] py-0 data-[state=open]:rounded-b-none"
+                style={{
+                    borderColor: tableColor,
+                }}
+            >
+                <TableListItemHeader />
+            </AccordionTrigger>
+            <AccordionContent>
+                <TableListItemContent tableColor={tableColor} />
+            </AccordionContent>
+        </AccordionItem>
+    );
+};
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx
new file mode 100644
index 00000000..dd694729
--- /dev/null
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Accordion } from '@/components/accordion/accordion';
+import { TableListItem } from './table-list-item/table-list-item';
+
+export interface TableListProps {}
+
+export const TableList: React.FC<TableListProps> = () => {
+    return (
+        <div className="flex flex-col">
+            <Accordion type="single" collapsible className="w-full">
+                <TableListItem />
+            </Accordion>
+        </div>
+    );
+};
diff --git a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
index e4cb7df8..e76c2940 100644
--- a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
+import { TableList } from './table-list/table-list';
 
 export interface TablesSectionProps {}
 
 export const TablesSection: React.FC<TablesSectionProps> = () => {
-    return <section className="flex h-full">tables</section>;
+    return (
+        <section className="flex h-full flex-col px-2">
+            <TableList />
+        </section>
+    );
 };