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

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

Browse Source 
upd: view home
This commit is contained in:
Amalia
2024-07-10 14:26:55 +08:00
committed by GitHub
parent 6d9243f933 c730b5cad2
commit 70464fe404
4 changed files with 202 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/module/home/components/list_divisi.tsx Normal file
View File

@@ -0,0 +1,58 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Card, Flex, Title, Group, Badge, Avatar, 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: 6,
title: 'Divisi Kemasyarakatan',
total: 12
},
]
export default function ListDivisi() {
const router = useRouter()
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Terbaru</Text>
{dataProject.map((v, i) => {
return (
<Box key={i} mb={20} >
<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}>
<Text fw={'bold'} fz={20}>PROYEK</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box>
</Card>
</Box>
);
})}
</Box>
</>
)
}

71
src/module/home/components/list_event.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { GoDiscussionClosed } from "react-icons/go";
import { CiClock2, CiUser } from "react-icons/ci";
const dataDiskusi = [
{
id: 1,
judul: 'Mengatasi Limbah Makanan ',
user: 'Fibra Marcell',
date: '21 Juni 2024'
},
{
id: 2,
judul: 'Pentingnya Menjaga Kelestarian Hutan ',
user: 'Bayu Tegar',
date: '15 Juni 2024'
},
{
id: 3,
judul: 'Mengatasi Limbah Industri ',
user: 'Nian Putri',
date: '11 Mei 2024'
},
{
id: 4,
judul: 'Manfaat Sampah Plastik',
user: 'Budi Prasetyo',
date: '10 Mei 2024'
},
]
export default function ListEvent() {
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{
dataDiskusi.map((v, i) => {
return (
<Box key={i} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}} mb={10}>
<Group>
<GoDiscussionClosed size={25} />
<Text fw={'bold'}>{v.judul}</Text>
</Group>
<Group justify="space-between" mt={10} c={'#8C8C8C'}>
<Group>
<CiUser size={18} />
<Text fz={13}>{v.user}</Text>
</Group>
<Group>
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group>
</Group>
</Box>
)
})
}
</Box>
</Box>
)
}

67
src/module/home/components/list_project.tsx Normal file
View File

@@ -0,0 +1,67 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } 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: 6,
title: 'Project 6',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
color: '#C5771A'
},
]
export default function ListProjects() {
const router = useRouter()
return (
<>
<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>
);
})}
</Box>
</>
)
}

7
src/module/home/view/view_home.tsx
View File

@@ -4,7 +4,9 @@ import React from 'react';
import Carosole from '../components/carosole'; import Carosole from '../components/carosole';
import Features from '../components/features'; import Features from '../components/features';
import IconNavbar from '../components/ui/icon_navbar'; import IconNavbar from '../components/ui/icon_navbar';
import ListProjects from '../components/list_project';
import ListDivisi from '../components/list_divisi';
import ListEvent from '../components/list_event';
export default function ViewHome() { export default function ViewHome() {
@@ -20,6 +22,9 @@ export default function ViewHome() {
<Stack > <Stack >
<Carosole /> <Carosole />
<Features /> <Features />
<ListProjects />
<ListDivisi />
<ListEvent />
</Stack> </Stack>
</Box> </Box>