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'
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 { useRouter } from "next/navigation";
import { MdAccountCircle } from "react-icons/md";
const dataProject = [
// {
// id: 4,
// title: 'Project 4',
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
// status: 'PROSES',
// color: '#C5771A'
// },
// {
// id: 5,
// title: 'Project5',
// description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
// status: 'PROSES',
// color: '#C5771A'
// },
{
id: 4,
title: 'Divisi Keuangan',
total: 24
},
{
id: 5,
title: 'Divisi Kesekretariatan',
total: 18
},
{
id: 6,
title: 'Divisi Kemasyarakatan',
@@ -33,7 +29,28 @@ export default function ListDivisi() {
<>
<Box pt={10}>
<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 (
<Box key={i} mb={20} >
<Card shadow="sm" padding="md" component="a" radius={10}>
@@ -44,14 +61,14 @@ export default function ListDivisi() {
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Text fw={'bold'} fz={20}>PROYEK</Text>
<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>
);
})}
})} */}
</Box>
</>
)

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

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