main

2026-03-29 12:44:02 +03:00
parent fe9aff3fec
commit 45a540c530
26 changed files with 10706 additions and 86 deletions
@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  User,
+  CreditCard,
+  Bell,
+  Palette,
+  Globe,
+  Shield,
+  LogOut,
+  ChevronRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const sections = [
+  { id: "profile", label: "Profil", icon: User, desc: "Ad, e-posta ve avatar" },
+  { id: "billing", label: "Abonelik & Fatura", icon: CreditCard, desc: "Plan, kredi ve ödeme bilgileri" },
+  { id: "notifications", label: "Bildirimler", icon: Bell, desc: "E-posta ve push bildirimleri" },
+  { id: "appearance", label: "Görünüm", icon: Palette, desc: "Tema ve dil tercihleri" },
+  { id: "language", label: "Dil", icon: Globe, desc: "Varsayılan video ve arayüz dili" },
+  { id: "security", label: "Güvenlik", icon: Shield, desc: "Şifre ve iki faktörlü doğrulama" },
+];
+
+export default function SettingsPage() {
+  const [activeSection, setActiveSection] = useState("profile");
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <div>
+        <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold">Ayarlar</h1>
+        <p className="text-sm text-[var(--color-text-muted)] mt-0.5">Hesap ve uygulama ayarlarını yönet</p>
+      </div>
+
+      <div className="space-y-2">
+        {sections.map((section) => {
+          const Icon = section.icon;
+          return (
+            <motion.button
+              key={section.id}
+              onClick={() => setActiveSection(section.id)}
+              whileTap={{ scale: 0.99 }}
+              className={cn(
+                "w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all",
+                activeSection === section.id
+                  ? "bg-violet-500/8 border border-violet-500/20"
+                  : "card-surface hover:border-[var(--color-border-default)]"
+              )}
+            >
+              <div className={cn(
+                "w-10 h-10 rounded-xl flex items-center justify-center shrink-0",
+                activeSection === section.id
+                  ? "bg-violet-500/15 text-violet-400"
+                  : "bg-[var(--color-bg-elevated)] text-[var(--color-text-muted)]"
+              )}>
+                <Icon size={18} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-sm font-semibold">{section.label}</h3>
+                <p className="text-xs text-[var(--color-text-muted)] mt-0.5">{section.desc}</p>
+              </div>
+              <ChevronRight size={16} className="text-[var(--color-text-ghost)]" />
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {/* Çıkış */}
+      <button className="w-full flex items-center gap-4 p-4 rounded-xl text-left bg-rose-500/5 border border-rose-500/15 text-rose-400 hover:bg-rose-500/10 transition-colors">
+        <div className="w-10 h-10 rounded-xl bg-rose-500/10 flex items-center justify-center">
+          <LogOut size={18} />
+        </div>
+        <span className="text-sm font-semibold">Çıkış Yap</span>
+      </button>
+    </div>
+  );
+}