From f4d0416dbe36132020f71cfa5e3a5ffcacd7f39b Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 28 Aug 2024 15:44:18 +0700 Subject: [PATCH] chore: Update npm dependencies for shadcn-ui@latest --- package.json | 1 + pnpm-lock.yaml | 69 +++++ src/components/navigationBar/Unsigned.tsx | 318 ++++++++++++---------- src/components/ui/navigation-menu.tsx | 128 +++++++++ 4 files changed, 367 insertions(+), 149 deletions(-) create mode 100644 src/components/ui/navigation-menu.tsx diff --git a/package.json b/package.json index 4878fe7..8532ece 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-slot": "^1.1.0", "@supabase/ssr": "^0.4.0", "@supabase/supabase-js": "^2.45.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7852a07..a4fcedb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@radix-ui/react-dropdown-menu': specifier: ^2.1.1 version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-navigation-menu': + specifier: ^1.2.0 + version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.4)(react@18.3.1) @@ -542,6 +545,39 @@ packages: react-remove-scroll: 2.5.7(@types/react@18.3.4)(react@18.3.1) dev: false + /@radix-ui/react-navigation-menu@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-OQ8tcwAOR0DhPlSY3e4VMXeHiol7la4PPdJWhhwJiJA+NLX0SaCaonOkRnI3gCDHoZ7Fo7bb/G6q25fRM2Y+3Q==} + 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 + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-popper@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==} peerDependencies: @@ -729,6 +765,19 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-use-previous@1.1.0(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + react: 18.3.1 + dev: false + /@radix-ui/react-use-rect@1.1.0(@types/react@18.3.4)(react@18.3.1): resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==} peerDependencies: @@ -757,6 +806,26 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==} + 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 + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/rect@1.1.0: resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} dev: false diff --git a/src/components/navigationBar/Unsigned.tsx b/src/components/navigationBar/Unsigned.tsx index e87cb2d..4cff6d3 100644 --- a/src/components/navigationBar/Unsigned.tsx +++ b/src/components/navigationBar/Unsigned.tsx @@ -1,156 +1,176 @@ import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - } from "@/components/ui/dropdown-menu"; - import { Menu } from "lucide-react"; - import { Card } from "@/components/ui/card"; + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Menu } from "lucide-react"; +import { Card } from "@/components/ui/card"; // import ThemeToggle from "@/components/theme-toggle"; - import { Button } from "@/components/ui/button"; +import { Button } from "@/components/ui/button"; // import ShadcnKit from "@/components/icons/shadcn-kit"; // import { nanoid } from "nanoid"; - import Link from "next/link"; - +import Link from "next/link"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuIndicator, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + NavigationMenuViewport, +} from "@/components/ui/navigation-menu"; + export function UnsignedNav() { - return ( - - {/* */} - -
    -
  • - Home -
    • -
  • - Businesses -
    • -
  • - Projects -
    • -
  • - Blog -
    • -
  • - - - Pages - - - - {landings.map((page) => ( - - {page.title} - - ))} - - -
    • -
- -
- - - -
- - - Pages - - - - {landings.map((page) => ( - - {page.title} - - ))} - - - - - - + + +
+ + + Pages + + + + {landings.map((page) => ( + + {page.title} + + ))} + + + + + + + + + + + Home + + + Features + + + Pricing + + + FAQs + + + - - - - - Home - - - Features - - - Pricing - - - FAQs - - - - - - - - - -
- - {/* */} + + + + + +
- - ); - }; - - const landings = [ - { - id: 1, - title: "Landing 01", - route: "/project-management", - }, - { - id: 2, - title: "Landing 02", - route: "/crm-landing", - }, - { - id: 3, - title: "Landing 03", - route: "/ai-content-landing", - }, - { - id: 4, - title: "Landing 04", - route: "/new-intro-landing", - }, - { - id: 5, - title: "Landing 05", - route: "/about-us-landing", - }, - { - id: 6, - title: "Landing 06", - route: "/contact-us-landing", - }, - { - id: 7, - title: "Landing 07", - route: "/faqs-landing", - }, - { - id: 8, - title: "Landing 08", - route: "/pricing-landing", - }, - { - id: 9, - title: "Landing 09", - route: "/career-landing", - }, - ]; - \ No newline at end of file + + {/* */} +
+ + ); +} + +const landings = [ + { + id: 1, + title: "Landing 01", + route: "/project-management", + }, + { + id: 2, + title: "Landing 02", + route: "/crm-landing", + }, + { + id: 3, + title: "Landing 03", + route: "/ai-content-landing", + }, + { + id: 4, + title: "Landing 04", + route: "/new-intro-landing", + }, + { + id: 5, + title: "Landing 05", + route: "/about-us-landing", + }, + { + id: 6, + title: "Landing 06", + route: "/contact-us-landing", + }, + { + id: 7, + title: "Landing 07", + route: "/faqs-landing", + }, + { + id: 8, + title: "Landing 08", + route: "/pricing-landing", + }, + { + id: 9, + title: "Landing 09", + route: "/career-landing", + }, +]; diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx new file mode 100644 index 0000000..1419f56 --- /dev/null +++ b/src/components/ui/navigation-menu.tsx @@ -0,0 +1,128 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const NavigationMenu = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + +)) +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName + +const NavigationMenuList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName + +const NavigationMenuItem = NavigationMenuPrimitive.Item + +const navigationMenuTriggerStyle = cva( + "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" +) + +const NavigationMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children}{" "} + +)) +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName + +const NavigationMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName + +const NavigationMenuLink = NavigationMenuPrimitive.Link + +const NavigationMenuViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
+ +
+)) +NavigationMenuViewport.displayName = + NavigationMenuPrimitive.Viewport.displayName + +const NavigationMenuIndicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
+ +)) +NavigationMenuIndicator.displayName = + NavigationMenuPrimitive.Indicator.displayName + +export { + navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +}