feat: implement Sonner notifications, add Setting model, and reorganize user management into settings navigation.

2026-09-11 11:39:43 +07:00
parent f4358eb00b
commit d1ed8f803b
15 changed files with 460 additions and 64 deletions
@@ -0,0 +1,49 @@
+'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="space-y-6 animate-in fade-in duration-500 pb-12">
+      {/* Settings Navigation Tabs */}
+      <div className="flex flex-col md:flex-row items-start md:items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-sm overflow-x-auto">
+        <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 p-1 rounded-xl text-xs font-bold w-full md:w-auto">
+          {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 px-4 py-2 rounded-lg transition-all duration-200 whitespace-nowrap",
+                  isActive 
+                    ? "bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-blue-400 shadow-sm font-black" 
+                    : "text-slate-500 hover:text-slate-900 dark:hover:text-white"
+                )}
+              >
+                <Icon className="w-4 h-4" />
+                {tab.name}
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Settings Content */}
+      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-sm overflow-hidden">
+        {children}
+      </div>
+    </div>
+  )
+}