toolbar

2026-01-05 19:29:55 -06:00 · 2024-08-06 12:05:41 +03:00
parent 5684acf357
commit f101de7d42
10 changed files with 350 additions and 95 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,12 @@
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.1.0",
        "@radix-ui/react-menubar": "^1.1.1",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slot": "^1.1.0",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "eslint-config-airbnb-typescript": "^18.0.0",
+        "lucide-react": "^0.424.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "^6.26.0",
@@ -1544,6 +1547,29 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-slot": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -5143,6 +5169,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.424.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.424.0.tgz",
+      "integrity": "sha512-x2Nj2aytk1iOyHqt4hKenfVlySq0rYxNeEf8hE0o+Yh0iE36Rqz0rkngVdv2uQtjZ70LAE73eeplhhptYt9x4Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -14,9 +14,12 @@
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "eslint-config-airbnb-typescript": "^18.0.0",
+    "lucide-react": "^0.424.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0",
--- a/src/components/button/button-variants.tsx
+++ b/src/components/button/button-variants.tsx
@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+                outline:
+                    'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                sm: 'h-8 rounded-md px-3 text-xs',
+                lg: 'h-10 rounded-md px-8',
+                icon: 'h-9 w-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from './button-variants';
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = 'Button';
+
+export { Button };
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'rounded-xl border bg-card text-card-foreground shadow',
+            className
+        )}
+        {...props}
+    />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex flex-col space-y-1.5 p-6', className)}
+        {...props}
+    />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn('font-semibold leading-none tracking-tight', className)}
+        {...props}
+    />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex items-center p-6 pt-0', className)}
+        {...props}
+    />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+    Card,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardDescription,
+    CardContent,
+};
--- a/src/components/separator/separator.tsx
+++ b/src/components/separator/separator.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+    (
+        { className, orientation = 'horizontal', decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                'shrink-0 bg-border',
+                orientation === 'horizontal'
+                    ? 'h-[1px] w-full'
+                    : 'h-full w-[1px]',
+                className
+            )}
+            {...props}
+        />
+    )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/src/pages/editor-page/editor-page.tsx
+++ b/src/pages/editor-page/editor-page.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { TopNavbar } from './top-navbar/top-navbar';
+import { Toolbar } from './toolbar/toolbar';

 export const EditorPage: React.FC = () => {
    return (
        <section className="bg-background">
            <TopNavbar />
+            <Toolbar />
        </section>
    );
 };
--- a/src/pages/editor-page/toolbar/toolbar-button.tsx
+++ b/src/pages/editor-page/toolbar/toolbar-button.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, ButtonProps } from '@/components/button/button';
+
+export const ToolbarButton: React.FC<ButtonProps> = (props) => {
+    return (
+        <Button
+            variant="ghost"
+            className="hover:bg-primary-foreground p-2 w-[36px]"
+            {...props}
+        />
+    );
+};
--- a/src/pages/editor-page/toolbar/toolbar.tsx
+++ b/src/pages/editor-page/toolbar/toolbar.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Card, CardContent } from '@/components/card/card';
+import { ZoomIn, ZoomOut, Save } from 'lucide-react';
+import { Separator } from '@/components/separator/separator';
+import { ToolbarButton } from './toolbar-button';
+
+export interface ToolbarProps {}
+
+export const Toolbar: React.FC<ToolbarProps> = () => {
+    return (
+        <div className="px-1">
+            <Card className="shadow-none p-0 bg-secondary h-[44px]">
+                <CardContent className="p-1 flex flex-row h-full items-center">
+                    <ToolbarButton>
+                        <ZoomIn />
+                    </ToolbarButton>
+                    <ToolbarButton>
+                        <ZoomOut />
+                    </ToolbarButton>
+                    <Separator orientation="vertical" />
+                    <ToolbarButton>
+                        <Save />
+                    </ToolbarButton>
+                </CardContent>
+            </Card>
+        </div>
+    );
+};
--- a/src/pages/editor-page/top-navbar/top-navbar.tsx
+++ b/src/pages/editor-page/top-navbar/top-navbar.tsx
@@ -5,8 +5,6 @@ import {
    MenubarContent,
    MenubarItem,
    MenubarMenu,
-    MenubarRadioGroup,
-    MenubarRadioItem,
    MenubarSeparator,
    MenubarShortcut,
    MenubarSub,
@@ -20,98 +18,102 @@ export interface TopNavbarProps {}

 export const TopNavbar: React.FC<TopNavbarProps> = () => {
    return (
-        <Menubar>
-            <MenubarMenu>
-                <MenubarTrigger>File</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarItem>
-                        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarItem>
-                        New Window <MenubarShortcut>⌘N</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarItem disabled>New Incognito Window</MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarSub>
-                        <MenubarSubTrigger>Share</MenubarSubTrigger>
-                        <MenubarSubContent>
-                            <MenubarItem>Email link</MenubarItem>
-                            <MenubarItem>Messages</MenubarItem>
-                            <MenubarItem>Notes</MenubarItem>
-                        </MenubarSubContent>
-                    </MenubarSub>
-                    <MenubarSeparator />
-                    <MenubarItem>
-                        Print... <MenubarShortcut>⌘P</MenubarShortcut>
-                    </MenubarItem>
-                </MenubarContent>
-            </MenubarMenu>
-            <MenubarMenu>
-                <MenubarTrigger>Edit</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarItem>
-                        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarItem>
-                        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarSub>
-                        <MenubarSubTrigger>Find</MenubarSubTrigger>
-                        <MenubarSubContent>
-                            <MenubarItem>Search the web</MenubarItem>
-                            <MenubarSeparator />
-                            <MenubarItem>Find...</MenubarItem>
-                            <MenubarItem>Find Next</MenubarItem>
-                            <MenubarItem>Find Previous</MenubarItem>
-                        </MenubarSubContent>
-                    </MenubarSub>
-                    <MenubarSeparator />
-                    <MenubarItem>Cut</MenubarItem>
-                    <MenubarItem>Copy</MenubarItem>
-                    <MenubarItem>Paste</MenubarItem>
-                </MenubarContent>
-            </MenubarMenu>
-            <MenubarMenu>
-                <MenubarTrigger>View</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarCheckboxItem>
-                        Always Show Bookmarks Bar
-                    </MenubarCheckboxItem>
-                    <MenubarCheckboxItem checked>
-                        Always Show Full URLs
-                    </MenubarCheckboxItem>
-                    <MenubarSeparator />
-                    <MenubarItem inset>
-                        Reload <MenubarShortcut>⌘R</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarItem disabled inset>
-                        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-                    </MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarItem inset>Hide Sidebar</MenubarItem>
-                </MenubarContent>
-            </MenubarMenu>
-            <MenubarMenu>
-                <MenubarTrigger>Profiles</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarRadioGroup value="benoit">
-                        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                        <MenubarRadioItem value="benoit">
-                            Benoit
-                        </MenubarRadioItem>
-                        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-                    </MenubarRadioGroup>
-                    <MenubarSeparator />
-                    <MenubarItem inset>Edit...</MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarItem inset>Add Profile...</MenubarItem>
-                </MenubarContent>
-            </MenubarMenu>
-
-            <Label contentEditable>aaa</Label>
-        </Menubar>
+        <nav className="flex flex-row items-center justify-between px-4">
+            <div className="flex flex-1 justify-start gap-x-3">
+                <div className="flex font-primary items-center">chartDB</div>
+                <div>
+                    <Menubar className="border-none shadow-none">
+                        <MenubarMenu>
+                            <MenubarTrigger>File</MenubarTrigger>
+                            <MenubarContent>
+                                <MenubarItem>
+                                    New Tab{' '}
+                                    <MenubarShortcut>⌘T</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarItem>
+                                    New Window{' '}
+                                    <MenubarShortcut>⌘N</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarItem disabled>
+                                    New Incognito Window
+                                </MenubarItem>
+                                <MenubarSeparator />
+                                <MenubarSub>
+                                    <MenubarSubTrigger>Share</MenubarSubTrigger>
+                                    <MenubarSubContent>
+                                        <MenubarItem>Email link</MenubarItem>
+                                        <MenubarItem>Messages</MenubarItem>
+                                        <MenubarItem>Notes</MenubarItem>
+                                    </MenubarSubContent>
+                                </MenubarSub>
+                                <MenubarSeparator />
+                                <MenubarItem>
+                                    Print...{' '}
+                                    <MenubarShortcut>⌘P</MenubarShortcut>
+                                </MenubarItem>
+                            </MenubarContent>
+                        </MenubarMenu>
+                        <MenubarMenu>
+                            <MenubarTrigger>Edit</MenubarTrigger>
+                            <MenubarContent>
+                                <MenubarItem>
+                                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarItem>
+                                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarSeparator />
+                                <MenubarSub>
+                                    <MenubarSubTrigger>Find</MenubarSubTrigger>
+                                    <MenubarSubContent>
+                                        <MenubarItem>
+                                            Search the web
+                                        </MenubarItem>
+                                        <MenubarSeparator />
+                                        <MenubarItem>Find...</MenubarItem>
+                                        <MenubarItem>Find Next</MenubarItem>
+                                        <MenubarItem>Find Previous</MenubarItem>
+                                    </MenubarSubContent>
+                                </MenubarSub>
+                                <MenubarSeparator />
+                                <MenubarItem>Cut</MenubarItem>
+                                <MenubarItem>Copy</MenubarItem>
+                                <MenubarItem>Paste</MenubarItem>
+                            </MenubarContent>
+                        </MenubarMenu>
+                        <MenubarMenu>
+                            <MenubarTrigger>View</MenubarTrigger>
+                            <MenubarContent>
+                                <MenubarCheckboxItem>
+                                    Always Show Bookmarks Bar
+                                </MenubarCheckboxItem>
+                                <MenubarCheckboxItem checked>
+                                    Always Show Full URLs
+                                </MenubarCheckboxItem>
+                                <MenubarSeparator />
+                                <MenubarItem inset>
+                                    Reload <MenubarShortcut>⌘R</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarItem disabled inset>
+                                    Force Reload{' '}
+                                    <MenubarShortcut>⇧⌘R</MenubarShortcut>
+                                </MenubarItem>
+                                <MenubarSeparator />
+                                <MenubarItem inset>
+                                    Toggle Fullscreen
+                                </MenubarItem>
+                                <MenubarSeparator />
+                                <MenubarItem inset>Hide Sidebar</MenubarItem>
+                            </MenubarContent>
+                        </MenubarMenu>
+                    </Menubar>
+                </div>
+            </div>
+            <div className="flex flex-1 justify-center">
+                <Label>Diagrams/</Label>
+                <Label contentEditable>aaa</Label>
+            </div>
+            <div className="flex flex-1 justify-end"></div>
+        </nav>
    );
 };