Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { YaltopiaFooter } from "./YaltopiaFooter";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { Shield } from "lucide-react";
|
|
|
|
export function PortalShell({
|
|
brand,
|
|
navItems,
|
|
children,
|
|
}: {
|
|
brand: string;
|
|
navItems: { href: string; label: string; icon: LucideIcon }[];
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<div className="flex flex-1">
|
|
<aside className="flex w-60 flex-col border-r border-white/10 bg-black/30">
|
|
<div className="flex h-14 items-center gap-2 border-b border-white/10 px-4">
|
|
<Shield className="h-6 w-6 text-cyan-400" />
|
|
<div>
|
|
<p className="text-xs text-[var(--color-muted)]">Yaltopia FIFA</p>
|
|
<p className="text-sm font-semibold">{brand}</p>
|
|
</div>
|
|
</div>
|
|
<nav className="flex-1 space-y-1 p-3">
|
|
{navItems.map(({ href, label, icon: Icon }) => {
|
|
const active =
|
|
pathname === href || pathname.startsWith(href + "/");
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
|
|
active
|
|
? "bg-cyan-500/15 text-cyan-400"
|
|
: "text-[var(--color-muted)] hover:bg-white/5 hover:text-foreground"
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
<div className="flex flex-1 flex-col">
|
|
<main className="flex-1 p-6 lg:p-8">{children}</main>
|
|
<YaltopiaFooter />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|