56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useLocation, Link } from 'react-router-dom';
|
|
import { Plus } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Layout({ children }: LayoutProps) {
|
|
const location = useLocation();
|
|
|
|
const navItems = [
|
|
{ path: '/', label: 'The Stream' },
|
|
{ path: '/my-dissolves', label: 'My Dissolves' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-canvas font-sans">
|
|
<header className="sticky top-0 z-40 h-[80px] w-full bg-canvas/80 backdrop-blur-sm">
|
|
<div className="container-full flex h-full items-center justify-between border-b border-hairline">
|
|
<div className="flex items-center gap-12">
|
|
<Link to="/" className="text-2xl font-medium tracking-tight text-ink">
|
|
Dissolve
|
|
</Link>
|
|
<nav className="hidden items-center gap-6 md:flex">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname === item.path;
|
|
return (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={cn(
|
|
'relative text-muted transition-colors hover:text-ink',
|
|
isActive && 'text-ink'
|
|
)}
|
|
>
|
|
{item.label}
|
|
{isActive && <div className="absolute -bottom-2 left-0 right-0 h-[2px] bg-ink"/>}
|
|
</NavLink>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
<Link to="/create" className="inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium h-10 px-6 bg-primary text-on-primary hover:bg-primary-active transition-colors">
|
|
<Plus className="mr-2 h-4 w-4" /> Share a Feeling
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
<main className="container-full py-8 md:py-12">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|