Add theme toggler button to landing

This commit is contained in:
sirin 2024-08-29 08:54:57 +07:00
parent abb3b884a5
commit 7dd092e061
2 changed files with 39 additions and 50 deletions

View File

@ -1,11 +1,11 @@
"use client"; "use client";
import React from "react"; import React from "react";
import { UnsignedNav } from "@/components/navigationBar/Unsigned"; import { UnsignedNav } from "@/components/navigationBar/unSigned";
export default function Page(){ export default function Page() {
return ( return (
<div> <div>
<UnsignedNav/> <UnsignedNav />
</div> </div>
); );
} }

View File

@ -9,7 +9,7 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Menu } from "lucide-react"; import { Menu } from "lucide-react";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
// import ThemeToggle from "@/components/theme-toggle"; 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 ShadcnKit from "@/components/icons/shadcn-kit";
// import { nanoid } from "nanoid"; // import { nanoid } from "nanoid";
@ -24,15 +24,14 @@ import {
navigationMenuTriggerStyle, navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"; } from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons" import { Icons } from "@/components/icons";
export function UnsignedNav() { export function UnsignedNav() {
const components = [ const components = [
{ {
title: "Businesses", title: "Businesses",
href: "", href: "",
description: description: "Apply",
"Apply",
}, },
]; ];
return ( return (
@ -50,11 +49,7 @@ export function UnsignedNav() {
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{components.map((component) => ( {components.map((component) => (
<ListItem <ListItem key={component.title} title={component.title} href={component.href}>
key={component.title}
title={component.title}
href={component.href}
>
{component.description} {component.description}
</ListItem> </ListItem>
))} ))}
@ -63,15 +58,11 @@ export function UnsignedNav() {
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium "> <NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
Projects
</NavigationMenuTrigger>
<NavigationMenuContent>Lorem Ipsum</NavigationMenuContent> <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium "> <NavigationMenuTrigger className="text-base font-medium ">Blog</NavigationMenuTrigger>
Blog
</NavigationMenuTrigger>
<NavigationMenuContent>Lorem Ipsum</NavigationMenuContent> <NavigationMenuContent>Lorem Ipsum</NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
@ -146,7 +137,7 @@ export function UnsignedNav() {
</DropdownMenu> </DropdownMenu>
</div> </div>
{/* <ThemeToggle /> */} <ThemeToggle />
</div> </div>
</Card> </Card>
); );
@ -164,10 +155,8 @@ const landings = [
route: "/crm-landing", route: "/crm-landing",
}, },
]; ];
const ListItem = React.forwardRef< const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
React.ElementRef<"a">, ({ className, title, children, ...props }, ref) => {
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return ( return (
<li> <li>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
@ -177,17 +166,17 @@ const ListItem = React.forwardRef<
"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"> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
<Icons.userLogo/> <Icons.userLogo />
{children} {children}
</p> </p>
</a> </a>
</NavigationMenuLink> </NavigationMenuLink>
</li> </li>
); );
}); }
);
ListItem.displayName = "ListItem"; ListItem.displayName = "ListItem";