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

upd: beranda

Browse Source 
Deskripsi:
- pengaplikasian caraousel pada list proyek dan divisi

No Issues
This commit is contained in:
amel
2024-07-10 17:21:37 +08:00
parent 6980edfd3d
commit 23ff7ce5d1
2 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
</>
)