feat(ui): update settings page

uniconnect-app/app/app/settings/page.tsx

+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
 export default function SettingsPage() {
-  return <div>SettingsPage</div>;
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-4xl font-bold mb-8'>Settings</h1>
+      <div className='space-y-6'>
+        <Card>
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>
+              Manage your notification preferences
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='flex items-center justify-between'>
+              <span>Email Notifications</span>
+              <Switch />
+            </div>
+            <div className='flex items-center justify-between'>
+              <span>Push Notifications</span>
+              <Switch />
+            </div>
+            <div className='flex items-center justify-between'>
+              <span>SMS Notifications</span>
+              <Switch />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Privacy</CardTitle>
+            <CardDescription>Control your privacy settings</CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='flex items-center justify-between'>
+              <span>Make Profile Public</span>
+              <Switch />
+            </div>
+            <div className='flex items-center justify-between'>
+              <span>Show Online Status</span>
+              <Switch />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Appearance</CardTitle>
+            <CardDescription>Customize your app experience</CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='flex items-center justify-between'>
+              <span>Dark Mode</span>
+              <Switch />
+            </div>
+            <div className='space-y-2'>
+              <label htmlFor='language'>Language</label>
+              <Select>
+                <SelectTrigger id='language'>
+                  <SelectValue placeholder='Select Language' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='en'>English</SelectItem>
+                  <SelectItem value='fr'>French</SelectItem>
+                  <SelectItem value='de'>German</SelectItem>
+                  <SelectItem value='es'>Spanish</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>Manage your account settings</CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <Button variant='outline'>Change Password</Button>
+            <Button variant='outline'>Linked Accounts</Button>
+          </CardContent>
+          <CardFooter>
+            <Button variant='destructive'>Delete Account</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  );
 }