70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import type React from "react"
|
|
import { IonPage, IonContent, IonList, IonItem, IonLabel, IonIcon, IonToggle, IonButton } from "@ionic/react"
|
|
import {
|
|
personCircleOutline,
|
|
mailOutline,
|
|
lockClosedOutline,
|
|
notificationsOutline,
|
|
moonOutline,
|
|
logOutOutline,
|
|
} from "ionicons/icons"
|
|
import Header from "../components/Header"
|
|
import Footer from "../components/Footer"
|
|
|
|
const Account: React.FC = () => {
|
|
return (
|
|
<IonPage>
|
|
<Header title="Account" />
|
|
<IonContent fullscreen className="ion-padding bg-dark-app">
|
|
<div className="px-4 py-4">
|
|
<div className="flex flex-col items-center mb-8">
|
|
<img
|
|
src="/placeholder.svg?height=100&width=100"
|
|
alt="Profile"
|
|
className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-tertiary-app"
|
|
/>
|
|
<h2 className="text-2xl font-bold text-text-light-app">Himanshi Kashyap</h2>
|
|
<p className="text-sm text-text-muted-app">himanshi.kashyap@example.com</p>
|
|
</div>
|
|
|
|
<IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
|
|
<IonItem lines="none" className="rounded-t-lg-app">
|
|
<IonIcon icon={personCircleOutline} slot="start" color="tertiary" />
|
|
<IonLabel className="text-text-light-app">Edit Profile</IonLabel>
|
|
</IonItem>
|
|
<IonItem lines="none">
|
|
<IonIcon icon={mailOutline} slot="start" color="tertiary" />
|
|
<IonLabel className="text-text-light-app">Change Email</IonLabel>
|
|
</IonItem>
|
|
<IonItem lines="none" className="rounded-b-lg-app">
|
|
<IonIcon icon={lockClosedOutline} slot="start" color="tertiary" />
|
|
<IonLabel className="text-text-light-app">Change Password</IonLabel>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
|
|
<IonItem lines="none" className="rounded-t-lg-app">
|
|
<IonIcon icon={notificationsOutline} slot="start" color="tertiary" />
|
|
<IonLabel className="text-text-light-app">Notifications</IonLabel>
|
|
<IonToggle slot="end" color="tertiary" checked={true} />
|
|
</IonItem>
|
|
<IonItem lines="none" className="rounded-b-lg-app">
|
|
<IonIcon icon={moonOutline} slot="start" color="tertiary" />
|
|
<IonLabel className="text-text-light-app">Dark Mode</IonLabel>
|
|
<IonToggle slot="end" color="tertiary" checked={true} />
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonButton expand="block" fill="outline" color="danger" className="rounded-md-app">
|
|
<IonIcon icon={logOutOutline} slot="start" />
|
|
Log Out
|
|
</IonButton>
|
|
</div>
|
|
</IonContent>
|
|
<Footer />
|
|
</IonPage>
|
|
)
|
|
}
|
|
|
|
export default Account
|