From a9ae670f0bb19460228bb0d86da9767930c9e1fd Mon Sep 17 00:00:00 2001 From: Guy Ben-Aharon Date: Mon, 5 Aug 2024 20:37:29 +0300 Subject: [PATCH] label --- components.json | 2 +- package-lock.json | 24 ++++ package.json | 1 + src/components/label/label.tsx | 24 ++++ src/pages/editor-page/editor-page.tsx | 112 +---------------- .../editor-page/top-navbar/top-navbar.tsx | 117 ++++++++++++++++++ 6 files changed, 169 insertions(+), 111 deletions(-) create mode 100644 src/components/label/label.tsx create mode 100644 src/pages/editor-page/top-navbar/top-navbar.tsx diff --git a/components.json b/components.json index de9489ce..3284f49c 100644 --- a/components.json +++ b/components.json @@ -12,6 +12,6 @@ }, "aliases": { "components": "src/components", - "utils": "src/lib/utils" + "utils": "@/lib/utils" } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9716ed3a..24c3db01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -1314,6 +1315,29 @@ } } }, + "node_modules/@radix-ui/react-label": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", + "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "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-menu": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz", diff --git a/package.json b/package.json index 1b1fe553..e353973f 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx new file mode 100644 index 00000000..683faa79 --- /dev/null +++ b/src/components/label/label.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/pages/editor-page/editor-page.tsx b/src/pages/editor-page/editor-page.tsx index f1af8454..93f5ef5c 100644 --- a/src/pages/editor-page/editor-page.tsx +++ b/src/pages/editor-page/editor-page.tsx @@ -1,118 +1,10 @@ -import { - Menubar, - MenubarCheckboxItem, - MenubarContent, - MenubarItem, - MenubarMenu, - MenubarRadioGroup, - MenubarRadioItem, - MenubarSeparator, - MenubarShortcut, - MenubarSub, - MenubarSubContent, - MenubarSubTrigger, - MenubarTrigger, -} from '@/components/menubar/menubar'; import React from 'react'; +import { TopNavbar } from './top-navbar/top-navbar'; export const EditorPage: React.FC = () => { return (
- - - File - - - New Tab ⌘T - - - New Window ⌘N - - New Incognito Window - - - Share - - Email link - Messages - Notes - - - - - Print... ⌘P - - - - - Edit - - - Undo ⌘Z - - - Redo ⇧⌘Z - - - - Find - - Search the web - - Find... - Find Next - Find Previous - - - - Cut - Copy - Paste - - - - View - - - Always Show Bookmarks Bar - - - Always Show Full URLs - - - - Reload ⌘R - - - Force Reload ⇧⌘R - - - Toggle Fullscreen - - Hide Sidebar - - - - Profiles - - - - Andy - - - Benoit - - - Luis - - - - Edit... - - Add Profile... - - - +
); }; diff --git a/src/pages/editor-page/top-navbar/top-navbar.tsx b/src/pages/editor-page/top-navbar/top-navbar.tsx new file mode 100644 index 00000000..2c0ab96d --- /dev/null +++ b/src/pages/editor-page/top-navbar/top-navbar.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import { + Menubar, + MenubarCheckboxItem, + MenubarContent, + MenubarItem, + MenubarMenu, + MenubarRadioGroup, + MenubarRadioItem, + MenubarSeparator, + MenubarShortcut, + MenubarSub, + MenubarSubContent, + MenubarSubTrigger, + MenubarTrigger, +} from '@/components/menubar/menubar'; +import { Label } from '@/components/label/label'; + +export interface TopNavbarProps {} + +export const TopNavbar: React.FC = () => { + return ( + + + File + + + New Tab ⌘T + + + New Window ⌘N + + New Incognito Window + + + Share + + Email link + Messages + Notes + + + + + Print... ⌘P + + + + + Edit + + + Undo ⌘Z + + + Redo ⇧⌘Z + + + + Find + + Search the web + + Find... + Find Next + Find Previous + + + + Cut + Copy + Paste + + + + View + + + Always Show Bookmarks Bar + + + Always Show Full URLs + + + + Reload ⌘R + + + Force Reload ⇧⌘R + + + Toggle Fullscreen + + Hide Sidebar + + + + Profiles + + + Andy + + Benoit + + Luis + + + Edit... + + Add Profile... + + + + {/* */} + + ); +};