forked from cardosofelipe/fast-next-template
Add Header and Footer components for authenticated page layouts.
This commit is contained in:
40
frontend/src/components/layout/Footer.tsx
Normal file
40
frontend/src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Footer Component
|
||||
* Simple footer for authenticated pages
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="border-t bg-gray-50 dark:bg-gray-900/50">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
|
||||
<div className="text-center text-sm text-gray-600 dark:text-gray-400 md:text-left">
|
||||
© {currentYear} FastNext Template. All rights reserved.
|
||||
</div>
|
||||
<div className="flex space-x-6">
|
||||
<Link
|
||||
href="/settings/profile"
|
||||
className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/yourusername/fastnext-stack"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
159
frontend/src/components/layout/Header.tsx
Normal file
159
frontend/src/components/layout/Header.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Header Component
|
||||
* Main navigation header for authenticated users
|
||||
* Includes logo, navigation links, and user menu
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { useLogout } from '@/lib/api/hooks/useAuth';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Settings, LogOut, User, Shield } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/**
|
||||
* Get user initials for avatar
|
||||
*/
|
||||
function getUserInitials(firstName?: string | null, lastName?: string | null): string {
|
||||
if (!firstName) return 'U';
|
||||
|
||||
const first = firstName.charAt(0).toUpperCase();
|
||||
const last = lastName?.charAt(0).toUpperCase() || '';
|
||||
|
||||
return `${first}${last}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation link component
|
||||
*/
|
||||
function NavLink({
|
||||
href,
|
||||
children,
|
||||
exact = false,
|
||||
}: {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
exact?: boolean;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const isActive = exact ? pathname === href : pathname.startsWith(href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
'px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-gray-900 text-white dark:bg-gray-700'
|
||||
: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
const { user } = useAuthStore();
|
||||
const { mutate: logout, isPending: isLoggingOut } = useLogout();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto flex h-16 items-center px-4">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-8">
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
FastNext
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="hidden md:flex items-center space-x-1">
|
||||
<NavLink href="/" exact>
|
||||
Home
|
||||
</NavLink>
|
||||
{user?.is_superuser && (
|
||||
<NavLink href="/admin">
|
||||
Admin
|
||||
</NavLink>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right side - User menu */}
|
||||
<div className="ml-auto flex items-center space-x-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-10 w-10 rounded-full">
|
||||
<Avatar>
|
||||
<AvatarFallback>
|
||||
{getUserInitials(user?.first_name, user?.last_name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56" align="end">
|
||||
<DropdownMenuLabel>
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
{user?.first_name} {user?.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/settings/profile" className="cursor-pointer">
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
Profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/settings/password" className="cursor-pointer">
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
Settings
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{user?.is_superuser && (
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/admin" className="cursor-pointer">
|
||||
<Shield className="mr-2 h-4 w-4" />
|
||||
Admin Panel
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer text-red-600 dark:text-red-400"
|
||||
onClick={handleLogout}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
{isLoggingOut ? 'Logging out...' : 'Log out'}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,7 @@
|
||||
// Layout components
|
||||
// Examples: Header, Footer, Sidebar, Navigation, etc.
|
||||
/**
|
||||
* Layout Components
|
||||
* Common layout elements for authenticated pages
|
||||
*/
|
||||
|
||||
export {};
|
||||
export { Header } from './Header';
|
||||
export { Footer } from './Footer';
|
||||
|
||||
Reference in New Issue
Block a user