g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stats

Browse Source
This commit is contained in:
NotII
2025-03-28 22:09:52 +00:00
parent 2fd5b8c331
commit 0567e04deb
4 changed files with 276 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/home-navbar.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { LogIn } from "lucide-react";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { useState } from "react";
export function HomeNavbar() {
const [menuOpen, setMenuOpen] = useState(false);
return (
<header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
<div className="flex items-center gap-2">
<span className="font-bold text-2xl">Ember</span>
</div>
<nav className="hidden md:flex gap-6 items-center">
<Link href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
Features
</Link>
<Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
Benefits
</Link>
<Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
<Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
<LogIn className="h-4 w-4 mr-2" />
Log In
</Button>
</Link>
<Link href="/auth/login">
<Button className="bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">Get Started</Button>
</Link>
</nav>
<div className="md:hidden">
<Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
<span className="sr-only">Toggle menu</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="4" x2="20" y1="12" y2="12" />
<line x1="4" x2="20" y1="6" y2="6" />
<line x1="4" x2="20" y1="18" y2="18" />
</svg>
</Button>
</div>
{/* Mobile menu */}
{menuOpen && (
<div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
<div className="flex flex-col gap-4">
<Link
href="#features"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Features
</Link>
<Link
href="#benefits"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Benefits
</Link>
<Link
href="/auth/login"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Log In
</Link>
<Link
href="/auth/register"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Create Account
</Link>
</div>
</div>
)}
</header>
);
}

30
components/theme-switcher.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Required for server-side rendering
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="ml-2"
>
{theme === "dark" ? (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
)}
</Button>
);
}