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

Merge pull request #41 from bipproduction/amalia/10-jul-24

Browse Source 
upd: beranda
This commit is contained in:
Amalia
2024-07-10 17:23:00 +08:00
committed by GitHub
parent 6980edfd3d 23ff7ce5d1
commit cd875c646d
2 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/module/home/components/list_divisi.tsx
View File

@@ -1,25 +1,21 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } from "@mantine/core"; import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text } from "@mantine/core";
import _ from "lodash"; import _ from "lodash";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { MdAccountCircle } from "react-icons/md";
const dataProject = [ const dataProject = [
// { {
// id: 4, id: 4,
// title: 'Project 4', title: 'Divisi Keuangan',
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba', total: 24
// status: 'PROSES', },
// color: '#C5771A' {
// }, id: 5,
// { title: 'Divisi Kesekretariatan',
// id: 5, total: 18
// title: 'Project5', },
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
// status: 'PROSES',
// color: '#C5771A'
// },
{ {
id: 6, id: 6,
title: 'Divisi Kemasyarakatan', title: 'Divisi Kemasyarakatan',
@@ -33,7 +29,28 @@ export default function ListDivisi() {
<> <>
<Box pt={10}> <Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Terbaru</Text> <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Terbaru</Text>
{dataProject.map((v, i) => { <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataProject.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10}>
<Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={WARNA.biruTua}>{_.toUpper(v.title)}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>PROYEK</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box>
</Card>
</Box>
</Carousel.Slide>
)}
</Carousel>
{/* {dataProject.map((v, i) => {
return ( return (
<Box key={i} mb={20} > <Box key={i} mb={20} >
<Card shadow="sm" padding="md" component="a" radius={10}> <Card shadow="sm" padding="md" component="a" radius={10}>
@@ -44,14 +61,14 @@ export default function ListDivisi() {
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>
<Box pt={10}> <Box pt={10} mih={150}>
<Text fw={'bold'} fz={20}>PROYEK</Text> <Text fw={'bold'} fz={18}>PROYEK</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text> <Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box> </Box>
</Card> </Card>
</Box> </Box>
); );
})} })} */}
</Box> </Box>
</> </>
) )

89
src/module/home/components/list_project.tsx
View File

@@ -1,30 +1,33 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } from "@mantine/core"; import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack } from "@mantine/core";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { MdAccountCircle } from "react-icons/md";
const dataProject = [ const dataProject = [
// { {
// id: 4, id: 4,
// title: 'Project 4', title: 'Project 4',
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba', description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
// status: 'PROSES', status: 'PROSES',
// color: '#C5771A' progress: 60,
// }, date: '05 Mei 2024'
// { },
// id: 5, {
// title: 'Project5', id: 5,
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba', title: 'Project5',
// status: 'PROSES', description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
// color: '#C5771A' status: 'PROSES',
// }, progress: 80,
date: '08 Juni 2024'
},
{ {
id: 6, id: 6,
title: 'Project 6', title: 'Project 6',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba', description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES', status: 'PROSES',
color: '#C5771A' progress: 47,
date: '10 Mei 2024'
}, },
] ]
export default function ListProjects() { export default function ListProjects() {
@@ -34,33 +37,31 @@ export default function ListProjects() {
<> <>
<Box pt={10}> <Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Proyek Terbaru</Text> <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Proyek Terbaru</Text>
{dataProject.map((v, i) => { <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
return ( {dataProject.map((v) =>
<Box key={i} mb={20}> <Carousel.Slide key={v.id}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}> <Box w={{ base: 300, md: 400 }}>
<Card.Section> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Box h={120} bg={WARNA.biruTua}> <Card.Section>
<Flex justify={'center'} align={'center'} h={"100%"}> <Box h={120} bg={WARNA.biruTua}>
<Title order={3} c={"white"}>{v.title}</Title> <Flex justify={'center'} align={'center'} h={"100%"}>
</Flex> <Title order={3} c={"white"}>{v.title}</Title>
</Box> </Flex>
</Card.Section> </Box>
<Box pt={10}> </Card.Section>
<Text>{v.description}</Text> <Stack h={150} align="stretch" justify="center">
<Group align='center' pt={10} justify='space-between'> <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Badge color={v.color}>{v.status}</Badge> <Progress.Section value={v.progress} color="yellow" striped >
<Avatar.Group> <Progress.Label>{v.progress}%</Progress.Label>
<Avatar> </Progress.Section>
<MdAccountCircle size={32} color={WARNA.biruTua} /> </Progress.Root>
</Avatar> <Text c={WARNA.biruTua}>Progres {v.date}</Text>
<Avatar>+5</Avatar> </Stack>
</Avatar.Group> </Card>
</Group> </Box>
</Box> </Carousel.Slide>
</Card> )}
</Box> </Carousel>
);
})}
</Box> </Box>
</> </>
) )