sean/gunbuilder-next-tailwind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tailwinds custom theme and tw plus components

Browse Source
This commit is contained in:
Sean Strawsburg
2025-06-29 07:43:18 -04:00
parent cfcc4c480e
commit ec6a0861f0
12 changed files with 1114 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.tsx
+36 -32
View File
@@ -2,52 +2,56 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import ThemeSwitcher from './ThemeSwitcher';
export function Navbar() {
export default function Navbar() {
const pathname = usePathname();
const navItems = [
{ name: 'Parts Catalog', href: '/' },
{ name: 'Build Checklist', href: '/build' },
{ name: 'My Builds', href: '/builds' },
{ href: '/', label: 'Parts Catalog' },
{ href: '/build', label: 'Build Checklist' },
{ href: '/builds', label: 'My Builds' },
];
return (
<nav className="bg-white shadow-sm border-b">
<nav className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo/Brand */}
{/* Logo */}
<div className="flex items-center">
<Link href="/" className="text-2xl font-bold text-gray-900">
Pew Builder
<Link href="/" className="flex items-center space-x-2">
<div className="w-8 h-8 bg-primary-600 dark:bg-primary-500 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-lg">🔫</span>
</div>
<span className="text-xl font-bold text-neutral-900 dark:text-white">
Pew Builder
</span>
</Link>
</div>
{/* Navigation Links */}
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.name}
href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive
? 'bg-blue-600 text-white'
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
}`}
>
{item.name}
</Link>
);
})}
</div>
<div className="hidden md:flex items-center space-x-8">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
pathname === item.href
? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300'
: 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700'
}`}
>
{item.label}
</Link>
))}
</div>
{/* Mobile menu button */}
<div className="md:hidden">
<button className="text-gray-700 hover:text-gray-900 focus:outline-none focus:text-gray-900">
{/* Theme Switcher */}
<div className="flex items-center space-x-4">
<ThemeSwitcher />
{/* Mobile menu button */}
<button className="md:hidden p-2 rounded-md text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
@@ -63,7 +67,7 @@ export function Navbar() {
const isActive = pathname === item.href;
return (
<Link
key={item.name}
key={item.href}
href={item.href}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
isActive
@@ -71,7 +75,7 @@ export function Navbar() {
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
}`}
>
{item.name}
{item.label}
</Link>
);
})}