tables initial

src/pages/editor-page/side-panel/side-panel.tsx

@@ -7,14 +7,19 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/select/select';
+import { TablesSection } from './tables-section/tables-section';
 
 export interface SidePanelProps {}
 
 export const SidePanel: React.FC<SidePanelProps> = () => {
+    const [selected, setSelected] = React.useState('tables');
     return (
         <aside className="flex h-full flex-col">
             <div className="flex justify-center border-b">
-                <Select defaultValue="tables">
+                <Select
+                    value={selected}
+                    onValueChange={(value) => setSelected(value)}
+                >
                     <SelectTrigger className="border-none shadow-none focus:border-transparent focus:ring-0">
                         <SelectValue />
                     </SelectTrigger>
@@ -28,7 +33,7 @@ export const SidePanel: React.FC<SidePanelProps> = () => {
                     </SelectContent>
                 </Select>
             </div>
-            {/* <div className="flex flex-1 bg-foreground">aa</div> */}
+            {selected === 'tables' ? <TablesSection /> : null}
         </aside>
     );
 };

src/pages/editor-page/side-panel/tables-section/tables-section.tsx

@@ -3,5 +3,5 @@ import React from 'react';
 export interface TablesSectionProps {}
 
 export const TablesSection: React.FC<TablesSectionProps> = () => {
-    return <section className="flex h-full"></section>;
+    return <section className="flex h-full">tables</section>;
 };