suna/frontend/src/app/(dashboard)/(personalAccount)/settings/layout.tsx

48 lines
1.7 KiB
TypeScript

'use client';
import { Separator } from '@/components/ui/separator';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Script from 'next/script';
export default function PersonalAccountSettingsPage({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
const items = [
// { name: "Profile", href: "/settings" },
// { name: "Teams", href: "/settings/teams" },
{ name: 'Billing', href: '/settings/billing' },
];
return (
<>
<Script async src="https://cdn.tolt.io/tolt.js" data-tolt="pk_svc8UjqvSEMSSpDuxKH63UmV"></Script>
<div className="space-y-6 w-full">
<Separator className="border-subtle dark:border-white/10" />
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0 w-full max-w-6xl mx-auto px-4">
<aside className="lg:w-1/4 p-1">
<nav className="flex flex-col space-y-1">
{items.map((item) => (
<Link
key={item.href}
href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${pathname === item.href
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground'}`}
>
{item.name}
</Link>
))}
</nav>
</aside>
<div className="flex-1 bg-card-bg dark:bg-background-secondary p-6 rounded-2xl border border-subtle dark:border-white/10 shadow-custom">
{children}
</div>
</div>
</div>
</>
);
}