Skip to content

Commit

Permalink
feat: add content in profile and edit profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
Ade Kiswara committed Nov 14, 2021
1 parent f7f3a65 commit 254512a
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 4 deletions.
76 changes: 74 additions & 2 deletions src/pages/main/profile/EditProfile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,81 @@
import { IonPage } from '@ionic/react';
import { IonAvatar, IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
import { closeOutline } from 'ionicons/icons';

const EditProfile: React.FC = () => {
return (
<IonPage>
<h1>Edit Profile Page</h1>
<IonHeader>
<IonToolbar>
<IonTitle>Edit Profil</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/"/>
</IonButtons>
</IonToolbar>
</IonHeader>

<IonContent>
<IonGrid className="ion-text-center">
<IonRow className="ion-margin-vertical">
<IonCol>
<IonAvatar>
<img src="https://i.pravatar.cc/300"/>
</IonAvatar>
</IonCol>
</IonRow>

<IonRow>
<IonCol>
<IonButton shape="round" color="secondary">PILIH FOTO</IonButton>
</IonCol>
</IonRow>

<IonRow className="ion-margin-vertical">
<IonCol>
<IonList>
<IonItem>
<IonLabel position="fixed">
Nama
</IonLabel>
<IonInput placeholder="John Doe"/>
<IonIcon icon={closeOutline} slot="end"/>
</IonItem>

<IonItem>
<IonLabel position="fixed">
E-mail
</IonLabel>
<IonInput placeholder="john.doe@domain.com"/>
<IonIcon icon={closeOutline} slot="end"/>
</IonItem>

<IonItem>
<IonLabel position="fixed">
No. Telp
</IonLabel>
<IonInput placeholder="08123456789"/>
<IonIcon icon={closeOutline} slot="end"/>
</IonItem>

<IonItem>
<IonLabel position="fixed">
Alamat
</IonLabel>
<IonInput placeholder="Jl. Mawar No. 1"/>
<IonIcon icon={closeOutline} slot="end"/>
</IonItem>

</IonList>
</IonCol>
</IonRow>

<IonRow>
<IonCol>
<IonButton shape="round" expand="block" color="primary">SIMPAN</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>

</IonPage>
);
};
Expand Down
54 changes: 52 additions & 2 deletions src/pages/main/profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,59 @@
import { IonPage } from '@ionic/react';
import { IonAvatar, IonButton, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonList, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';

const Profile: React.FC = () => {
return (
<IonPage>
<h1>Profile Page</h1>
<IonHeader>
<IonToolbar>
<IonTitle slot="start">Profil Saya</IonTitle>
</IonToolbar>
</IonHeader>

<IonContent>
<IonGrid className="ion-text-center">
<IonRow className="ion-margin-vertical">
<IonCol>
<IonAvatar>
<img src="https://i.pravatar.cc/300"/>
</IonAvatar>
<h3 className="ion-text-center">John Doe</h3>
</IonCol>
</IonRow>

<IonRow className="ion-margin-vertical">
<IonCol>
<IonList>
<IonItem>
<IonLabel position="fixed">E-mail</IonLabel>
<IonInput placeholder="john.doe@domain.com" disabled/>
</IonItem>

<IonItem>
<IonLabel position="fixed">
No. Telp
</IonLabel>
<IonInput placeholder="08123456789" disabled/>
</IonItem>

<IonItem>
<IonLabel position="fixed">
Alamat
</IonLabel>
<IonInput placeholder="Jl. Mawar No. 1" disabled/>
</IonItem>

</IonList>
</IonCol>
</IonRow>

<IonRow>
<IonCol>
<IonButton shape="round">EDIT PROFIL</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>

</IonPage>
);
};
Expand Down

0 comments on commit 254512a

Please sign in to comment.