100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import colors from '@/con/colors';
|
|
import { Stack, Box, Text, SimpleGrid, Paper } from '@mantine/core';
|
|
import React from 'react';
|
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
|
import { LineChart } from '@mantine/charts';
|
|
|
|
const data = [
|
|
{
|
|
id: 1,
|
|
judul: 'Bantuan Tunai',
|
|
deskripsi: 'Bantuan keuangan langsung bagi keluarga kurang mampu'
|
|
},
|
|
{
|
|
id: 2,
|
|
judul: 'Pelatihan Kerja',
|
|
deskripsi: 'Program pelatihan keterampilan untuk meningkatkan peluang kerja'
|
|
},
|
|
{
|
|
id: 3,
|
|
judul: 'Subsidi Pangan',
|
|
deskripsi: 'Distribusi bahan pangan bersubsidi bagi masyarakat kurang mampu'
|
|
},
|
|
{
|
|
id: 4,
|
|
judul: 'Layanan Kesehatan Gratis',
|
|
deskripsi: 'Akses kesehatan gratis bagi masyarakat kurang mampu'
|
|
},
|
|
]
|
|
const dataStatistik = [
|
|
{
|
|
id: 1,
|
|
tahun: '2022',
|
|
Kemiskinan: 400000
|
|
},
|
|
{
|
|
id: 2,
|
|
tahun: '2023',
|
|
Kemiskinan: 450000
|
|
},
|
|
{
|
|
id: 3,
|
|
tahun: '2024',
|
|
Kemiskinan: 500000
|
|
},
|
|
{
|
|
id: 4,
|
|
tahun: '2025',
|
|
Kemiskinan: 400000
|
|
},
|
|
]
|
|
function Page() {
|
|
return (
|
|
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
<Box px={{ base: 'md', md: 100 }} >
|
|
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
|
Program Kemiskinan
|
|
</Text>
|
|
<Text ta={'center'} fz={'h4'}>Berbagai program bantuan untuk mengurangi kemiskinan dan meningkatkan kesejahteraan masyarakat</Text>
|
|
</Box>
|
|
<Box px={{ base: "md", md: 100 }}>
|
|
<Stack gap={'lg'} justify='center'>
|
|
<SimpleGrid
|
|
pb={10}
|
|
cols={{
|
|
base: 1,
|
|
md: 2
|
|
}}
|
|
>
|
|
{data.map((v, k) => {
|
|
return (
|
|
<Paper p={'xl'} key={k}>
|
|
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
|
|
<Text fz={'lg'} c={'black'}>{v.deskripsi}</Text>
|
|
</Paper>
|
|
)
|
|
})}
|
|
</SimpleGrid>
|
|
<Paper p={'xl'}>
|
|
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>Statistik Kemiskinan Masyarakat</Text>
|
|
<LineChart
|
|
h={300}
|
|
data={dataStatistik}
|
|
dataKey="tahun"
|
|
series={[
|
|
{ name: 'Kemiskinan', color: colors['blue-button'] },
|
|
]}
|
|
curveType="linear"
|
|
/>
|
|
</Paper>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Page;
|