manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reorder settings: Notifications, Profile, Family + collapsible theme

Browse source
This commit is contained in:
Manohar Gupta 2026-05-10 15:49:42 +05:30
parent 03a5e3f3e9
commit 29bf635926
1 changed files with 63 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/app/settings/page.tsx
View file

@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTheme } from "../ThemeProvider";
@ -7,6 +8,7 @@ import { useTheme } from "../ThemeProvider";
export default function SettingsPage() {
const router = useRouter();
const { theme, mode, setMode } = useTheme();
const [themeOpen, setThemeOpen] = useState(false);
const themeOptions = [
{ value: "light", label: "Light" },
@ -18,50 +20,74 @@ export default function SettingsPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
<div className="p-4 flex items-center gap-4">
<button onClick={() => router.back()} className="p-2">
←
</button>
<button onClick={() => router.back()} className="p-2">←</button>
<h1 className="text-xl font-bold">Settings</h1>
</div>
<div className="px-4 space-y-3">
{/* Theme Mode */}
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="font-medium mb-3">Theme</div>
<div className="grid grid-cols-2 gap-2">
{themeOptions.map((opt) => (
<button
key={opt.value}
onClick={() => setMode(opt.value)}
className={`p-3 rounded-lg text-sm ${
mode === opt.value
? "bg-rose-400 text-white"
: "bg-gray-100 dark:bg-gray-700"
}`}
>
{opt.label}
</button>
))}
{/* Notifications */}
<Link href="/notifications" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center gap-3">
<span className="text-xl">🔔</span>
<div className="font-medium">Notifications</div>
</div>
<span className="text-gray-400">→</span>
</Link>
{/* Profile */}
<Link href="/profile" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center gap-3">
<span className="text-xl">👤</span>
<div className="font-medium">Profile</div>
</div>
<span className="text-gray-400">→</span>
</Link>
{/* Family */}
<Link href="/family" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center gap-3">
<span className="text-xl">👨‍👩‍👧</span>
<div className="font-medium">Family</div>
</div>
<span className="text-gray-400">→</span>
</Link>
{/* Theme - Collapsible */}
<div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
<button
onClick={() => setThemeOpen(!themeOpen)}
className="w-full flex items-center justify-between p-4"
>
<div className="flex items-center gap-3">
<span className="text-xl">{theme === "dark" ? "🌙" : "☀️"}</span>
<div className="font-medium">Theme</div>
</div>
<span className={`text-gray-400 transition-transform ${themeOpen ? "rotate-180" : ""}`}>▼</span>
</button>
{themeOpen && (
<div className="px-4 pb-4">
<div className="grid grid-cols-2 gap-2">
{themeOptions.map((opt) => (
<button
key={opt.value}
onClick={() => setMode(opt.value)}
className={`p-3 rounded-lg text-sm ${
mode === opt.value
? "bg-rose-400 text-white"
: "bg-gray-100 dark:bg-gray-700"
}`}
>
{opt.label}
</button>
))}
</div>
</div>
)}
</div>
{/* Links */}
<Link href="/profile" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="font-medium">Profile</div>
<div className="text-gray-400">→</div>
</Link>
<Link href="/notifications" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="font-medium">Notifications</div>
<div className="text-gray-400">→</div>
</Link>
<Link href="/family" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="font-medium">Family Members</div>
<div className="text-gray-400">→</div>
</Link>
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
{/* App Version */}
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl mt-4">
<div className="font-medium">App Version</div>
<div className="text-sm text-gray-500">Tia v1.0.0</div>
</div>