wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: edit profile

Browse Source 
Deskripsi:
- view edit profile
- component ui profile

No Issues
This commit is contained in:
amel
2024-07-04 15:02:39 +08:00
parent be5433694e
commit bf1be96b4f
4 changed files with 115 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/module/user/profile/component/ui/header_edit_profile.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function HeaderEditProfile() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>EDIT PROFIL</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

14
src/module/user/profile/component/ui/ui_profile.tsx Normal file
View File

@@ -0,0 +1,14 @@
'use client'
import { Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
export function InfoTitleProfile() {
const router = useRouter()
return (
<Group justify="space-between" grow py={5}>
<Text fw={'bold'} fz={20}>Informasi</Text>
<Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
</Group>
)
}

72
src/module/user/profile/view/view_edit_profile.tsx
View File

@@ -1,9 +1,77 @@
import { Box } from "@mantine/core";
import { WARNA } from "@/module/_global";
import { Box, Button, Stack, TextInput } from "@mantine/core";
import HeaderEditProfile from "../component/ui/header_edit_profile";
import { HiUser } from "react-icons/hi2";
export default function ViewEditProfile() {
return (
<Box>
Edit profile
<HeaderEditProfile />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<Box bg={WARNA.biruTua} py={30} px={50}
style={{
borderRadius: 10,
}}>
<HiUser size={100} color={WARNA.bgWhite} />
</Box>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
</Box>
)
}

20
src/module/user/profile/view/view_profile.tsx
View File

@@ -1,17 +1,18 @@
import { LayoutNavbarHome, WARNA } from "@/module/_global";
import { ActionIcon, Anchor, Box, Flex, Group, Stack, Text } from "@mantine/core";
import { LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { ActionIcon, Anchor, Box, Button, Flex, Group, Stack, Text } from "@mantine/core";
import { BsInfo } from "react-icons/bs";
import { HiUser } from "react-icons/hi2";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { InfoTitleProfile } from "../component/ui/ui_profile";
export default function ViewProfile() {
return (
<>
<LayoutNavbarHome>
<Group justify="space-between">
<Text fw={'bold'} c={'white'}>Profile</Text>
<LayoutIconBack />
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<BsInfo size={20} color='white' />
</ActionIcon>
@@ -27,29 +28,24 @@ export default function ViewProfile() {
</Stack>
</LayoutNavbarHome>
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Text fw={'bold'} fz={20}>Informasi</Text>
<Anchor href="profile/edit" ta={"right"}>
Edit
</Anchor>
</Group>
<InfoTitleProfile />
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28}/>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28}/>
<FaSquarePhone size={28} />
<Text fz={18}>NoTelepon</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28}/>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>