feat: modernize admin panel UI and add openinary integration

2026-07-12 15:10:50 +03:00
parent 378a1e033a
commit ca1e849e80
20 changed files with 536 additions and 248 deletions
@@ -0,0 +1,34 @@
+import { LogOut, Bell } from 'lucide-react'
+import { logout } from '@/lib/auth'
+import { redirect } from 'next/navigation'
+
+export function Header() {
+  return (
+    <header className="h-16 bg-white/80 backdrop-blur-md border-b border-slate-200/60 flex items-center justify-between px-6 sticky top-0 z-10">
+      <div className="flex items-center text-sm text-slate-500 font-medium">
+        Hoş Geldiniz, <span className="text-slate-800 font-bold ml-1">Admin</span>
+      </div>
+      
+      <div className="flex items-center gap-4">
+        <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-full transition-colors relative">
+          <Bell size={20} />
+          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-blue-500 rounded-full border-2 border-white"></span>
+        </button>
+        <div className="w-px h-6 bg-slate-200"></div>
+        <form action={async () => {
+          'use server'
+          await logout()
+          redirect('/admin/login')
+        }}>
+          <button 
+            type="submit"
+            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+          >
+            <LogOut size={18} />
+            <span className="hidden sm:inline">Çıkış Yap</span>
+          </button>
+        </form>
+      </div>
+    </header>
+  )
+}
@@ -0,0 +1,51 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Package, Settings, Tags, Users2 } from 'lucide-react'
+
+const navItems = [
+  { href: '/admin', icon: LayoutDashboard, label: 'Dashboard' },
+  { href: '/admin/categories', icon: Tags, label: 'Kategoriler' },
+  { href: '/admin/products', icon: Package, label: 'Ürünler' },
+  { href: '/admin/users', icon: Users2, label: 'Kullanıcılar' },
+  { href: '/admin/settings', icon: Settings, label: 'Ayarlar' },
+]
+
+export function Sidebar() {
+  const pathname = usePathname()
+
+  return (
+    <aside className="w-64 bg-white/80 backdrop-blur-xl border-r border-slate-200/60 hidden md:flex flex-col shadow-sm">
+      <div className="p-6 border-b border-slate-100">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
+            <span className="text-white font-bold text-lg leading-none">M</span>
+          </div>
+          <h2 className="text-xl font-bold tracking-tight text-slate-800">Admin</h2>
+        </div>
+      </div>
+      <nav className="flex-1 p-4 space-y-1.5 overflow-y-auto">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href))
+          const Icon = item.icon
+          
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 font-medium ${
+                isActive 
+                  ? 'bg-blue-50 text-blue-700 shadow-sm shadow-blue-100/50' 
+                  : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
+              }`}
+            >
+              <Icon size={20} className={isActive ? 'text-blue-600' : 'text-slate-400'} strokeWidth={isActive ? 2.5 : 2} />
+              <span>{item.label}</span>
+            </Link>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}