62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { cn } from "@ui/lib";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
export function SettingsMenu({
|
||
|
|
menuItems,
|
||
|
|
}: {
|
||
|
|
menuItems: {
|
||
|
|
title: string;
|
||
|
|
avatar: ReactNode;
|
||
|
|
items: {
|
||
|
|
title: string;
|
||
|
|
href: string;
|
||
|
|
icon?: ReactNode;
|
||
|
|
}[];
|
||
|
|
}[];
|
||
|
|
}) {
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
const isActiveMenuItem = (href: string) => pathname.includes(href);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
{menuItems.map((item, i) => (
|
||
|
|
<div key={i}>
|
||
|
|
<div className="flex items-center justify-start gap-2">
|
||
|
|
{item.avatar}
|
||
|
|
<h2 className="font-semibold text-foreground/60 text-xs">
|
||
|
|
{item.title}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className="mt-2 flex list-none flex-row gap-6 lg:mt-4 lg:flex-col lg:gap-2">
|
||
|
|
{item.items.map((subitem, k) => (
|
||
|
|
<li key={k}>
|
||
|
|
<Link
|
||
|
|
href={subitem.href}
|
||
|
|
className={cn(
|
||
|
|
"lg:-ml-0.5 flex items-center gap-2 border-b-2 py-1.5 text-sm lg:border-b-0 lg:border-l-2 lg:pl-2",
|
||
|
|
isActiveMenuItem(subitem.href)
|
||
|
|
? "border-primary font-bold"
|
||
|
|
: "border-transparent",
|
||
|
|
)}
|
||
|
|
data-active={isActiveMenuItem(subitem.href)}
|
||
|
|
>
|
||
|
|
<span className="shrink-0">
|
||
|
|
{subitem.icon}
|
||
|
|
</span>
|
||
|
|
<span>{subitem.title}</span>
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|