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

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