swag-shop/frontend/src/components/main-navbar.tsx

72 lines
2.1 KiB
TypeScript

import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Menu } from "lucide-react";
import { Card } from "@/components/ui/card";
import { ThemeSwitch } from "./theme-switch";
import { Button } from "@/components/ui/button";
import DynamicLoginButton from "./dynamic-login-button";
const MainNavbar = () => {
return (
<div className="fixed left-0 top-0 z-50 box-border w-full border-b px-4 py-3 backdrop-blur-lg transition-all duration-300">
<Card className="flex items-center justify-between gap-6 border-0 bg-transparent shadow-none">
<ul className="hidden items-center gap-10 text-card-foreground md:flex">
<li className="font-medium text-primary">
<a href="#home">Home</a>
</li>
{/* <li>
<a href="#pricing">Pricing</a>
</li> */}
<li>
<a href="#faqs">FAQs</a>
</li>
</ul>
<div className="flex items-center">
<DynamicLoginButton />
<div className="mr-2 flex items-center gap-2 md:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Menu className="h-5 w-5 rotate-0 scale-100" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<a href="#home">Home</a>
</DropdownMenuItem>
<DropdownMenuItem>
<a href="#features">Features</a>
</DropdownMenuItem>
{/* <DropdownMenuItem>
<a href="#pricing">Pricing</a>
</DropdownMenuItem> */}
<DropdownMenuItem>
<a href="#faqs">FAQs</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Button variant="secondary" className="w-full text-sm">
Sign in
</Button>
</DropdownMenuItem>
<DropdownMenuItem>
<Button className="w-full text-sm">Get Started</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<ThemeSwitch />
</div>
</Card>
</div>
);
};
export default MainNavbar;