50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import { User, Share2 } from 'lucide-react'
|
|
|
|
export default function SettingsLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname()
|
|
|
|
const tabs = [
|
|
{ name: 'User Management', href: '/settings/users', icon: User },
|
|
{ name: 'Integrations & Share', href: '/settings/integrations', icon: Share2 },
|
|
]
|
|
|
|
return (
|
|
<div className="animate-in fade-in space-y-6 pb-12 duration-500">
|
|
{/* Settings Navigation Tabs */}
|
|
<div className="flex flex-col items-start gap-4 overflow-x-auto rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="flex w-full items-center rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
|
|
{tabs.map((tab) => {
|
|
const isActive = pathname === tab.href
|
|
const Icon = tab.icon
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-lg px-4 py-2 whitespace-nowrap transition-all duration-200',
|
|
isActive
|
|
? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-blue-400'
|
|
: 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{tab.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Settings Content */}
|
|
<div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|