68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
'use client'
|
|
import { WARNA } from "@/module/_global";
|
|
import { Carousel } from "@mantine/carousel";
|
|
import { Box, Card, Flex, Title, Text, Progress, Stack } from "@mantine/core";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
const dataProject = [
|
|
{
|
|
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',
|
|
progress: 47,
|
|
date: '10 Mei 2024'
|
|
},
|
|
]
|
|
export default function ListProjects() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<>
|
|
<Box pt={10}>
|
|
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
|
|
<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>
|
|
</>
|
|
)
|
|
} |