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 "@/app/globals.css";
import { UnsignedNav } from "@/components/navigationBar/unSigned";
import { UnsignedNav } from "@/components/navigationBar/Unsigned";
const montserrat = Montserrat({
subsets: ["latin"],

View File

@ -31,27 +31,31 @@ const landings = [
route: "/crm-landing",
},
];
const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={cn(
"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
)}
{...props}>
<div className="text-sm font-medium leading-none">{title}</div>
<hr />
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
</a>
</NavigationMenuLink>
</li>
);
}
);
const ListItem = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={cn(
"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
)}
{...props}
>
<div className="text-sm font-medium leading-none">{title}</div>
<hr />
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
{children}
</p>
</a>
</NavigationMenuLink>
</li>
);
});
ListItem.displayName = "ListItem";
export function UnsignedNav() {
@ -86,7 +90,8 @@ export function UnsignedNav() {
<Link
className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
href="/"
aria-label="Brand">
aria-label="Brand"
>
<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} />
B2DVentures
@ -98,11 +103,17 @@ export function UnsignedNav() {
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base">
Businesses
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{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}
</ListItem>
))}
@ -111,11 +122,17 @@ export function UnsignedNav() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base font-medium ">
Projects
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{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}
</ListItem>
))}
@ -124,11 +141,17 @@ export function UnsignedNav() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base">Blogs</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base">
Blogs
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{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}
</ListItem>
))}
@ -137,7 +160,10 @@ export function UnsignedNav() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className="text-base font-medium" href="docs">
<NavigationMenuLink
className="text-base font-medium"
href="docs"
>
Docs
</NavigationMenuLink>
</NavigationMenuItem>
@ -152,7 +178,7 @@ export function UnsignedNav() {
<ThemeToggle />
<Separator orientation="vertical" className="mx-3" />
<Button variant="secondary" className="border-2 border-border">
Login
<Link href='/login'>Login</Link>
</Button>
<Button>Sign up</Button>
</div>