chore: Update navigationBar import in layout.tsx

This commit is contained in:
Pattadon 2024-08-29 12:40:27 +07:00
parent 747562a4bb
commit da47f9721c
2 changed files with 57 additions and 31 deletions

View File

@ -3,7 +3,7 @@ import { Montserrat } from "next/font/google";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
import "@/app/globals.css"; import "@/app/globals.css";
import { UnsignedNav } from "@/components/navigationBar/unSigned"; import { UnsignedNav } from "@/components/navigationBar/Unsigned";
const montserrat = Montserrat({ const montserrat = Montserrat({
subsets: ["latin"], subsets: ["latin"],

View File

@ -31,8 +31,10 @@ const landings = [
route: "/crm-landing", route: "/crm-landing",
}, },
]; ];
const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>( const ListItem = React.forwardRef<
({ className, title, children, ...props }, ref) => { React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return ( return (
<li> <li>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
@ -42,16 +44,18 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
className className
)} )}
{...props}> {...props}
>
<div className="text-sm font-medium leading-none">{title}</div> <div className="text-sm font-medium leading-none">{title}</div>
<hr /> <hr />
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
{children}
</p>
</a> </a>
</NavigationMenuLink> </NavigationMenuLink>
</li> </li>
); );
} });
);
ListItem.displayName = "ListItem"; ListItem.displayName = "ListItem";
export function UnsignedNav() { export function UnsignedNav() {
@ -86,7 +90,8 @@ export function UnsignedNav() {
<Link <Link
className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80" className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
href="/" href="/"
aria-label="Brand"> aria-label="Brand"
>
<span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white"> <span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
<Image src="./logo.svg" alt="logo" width={50} height={50} /> <Image src="./logo.svg" alt="logo" width={50} height={50} />
B2DVentures B2DVentures
@ -98,11 +103,17 @@ export function UnsignedNav() {
<NavigationMenu> <NavigationMenu>
<NavigationMenuList> <NavigationMenuList>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base">
Businesses
</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{businessComponents.map((component) => ( {businessComponents.map((component) => (
<ListItem key={component.title} title={component.title} href={component.href}> <ListItem
key={component.title}
title={component.title}
href={component.href}
>
{component.description} {component.description}
</ListItem> </ListItem>
))} ))}
@ -111,11 +122,17 @@ export function UnsignedNav() {
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base font-medium ">
Projects
</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{projectComponents.map((component) => ( {projectComponents.map((component) => (
<ListItem key={component.title} title={component.title} href={component.href}> <ListItem
key={component.title}
title={component.title}
href={component.href}
>
{component.description} {component.description}
</ListItem> </ListItem>
))} ))}
@ -124,11 +141,17 @@ export function UnsignedNav() {
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base">Blogs</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base">
Blogs
</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{blogComponents.map((component) => ( {blogComponents.map((component) => (
<ListItem key={component.title} title={component.title} href={component.href}> <ListItem
key={component.title}
title={component.title}
href={component.href}
>
{component.description} {component.description}
</ListItem> </ListItem>
))} ))}
@ -137,7 +160,10 @@ export function UnsignedNav() {
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuLink className="text-base font-medium" href="docs"> <NavigationMenuLink
className="text-base font-medium"
href="docs"
>
Docs Docs
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
@ -152,7 +178,7 @@ export function UnsignedNav() {
<ThemeToggle /> <ThemeToggle />
<Separator orientation="vertical" className="mx-3" /> <Separator orientation="vertical" className="mx-3" />
<Button variant="secondary" className="border-2 border-border"> <Button variant="secondary" className="border-2 border-border">
Login <Link href='/login'>Login</Link>
</Button> </Button>
<Button>Sign up</Button> <Button>Sign up</Button>
</div> </div>