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

UI Menu Pendidikan

Browse Source
This commit is contained in:
nico
2025-04-10 15:31:59 +08:00
parent 4824e4e848
commit 4bd9ef6acf
19 changed files with 1699 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
import colors from '@/con/colors';
import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
icon: <IconLeaf size={100} color={colors['blue-button']} />,
title: 'Luas Lahan Hijau',
jumlah: '± 25 hektar',
deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
},
{
id: 2,
icon: <IconHome size={100} color={colors['blue-button']} />,
title: 'Jumlah Rumah Tangga',
jumlah: '± 1.500 rumah tangga',
deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
},
{
id: 3,
icon: <IconDroplet size={100} color={colors['blue-button']} />,
title: 'Jumlah Sungai dan Saluran Air',
jumlah: '± 3 Sungai Besar',
deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
},
{
id: 4,
icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
title: 'Program Penghijauan',
jumlah: '± 1000 Pohon',
deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
},
{
id: 5,
icon: <IconTrash size={100} color={colors['blue-button']} />,
title: 'Pengelolaan Sampah',
jumlah: '± 5 Bank Sampah',
deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
},
]
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"}>
Data Lingkungan Desa
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 2,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper p={20} bg={colors['white-trans-1']}>
<Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
{v.title}
</Text>
<Box>
{v.icon}
<Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
{v.jumlah}
</Text>
</Box>
<Text fz={{ base: "lg", md: "xl" }} >
{v.deskripsi}
</Text>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

103
src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx Normal file
View File

@@ -0,0 +1,103 @@
import colors from '@/con/colors';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
title: 'Tujuan Edukasi Lingkungan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat
</ListItem>
<ListItem>
Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi
</ListItem>
<ListItem>
Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia
</ListItem>
<ListItem>
Membentuk generasi muda yang peduli terhadap isu-isu lingkungan
</ListItem>
</List>
},
{
id: 2,
title: 'Materi Edukasi yang Diberikan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pengelolaan Sampah (Pilah sampah organik dan anorganik)
</ListItem>
<ListItem>
Pencegahan pencemaran lingkungan (air, udara, dan tanah)
</ListItem>
<ListItem>
Pemanfaatan lahan hijau dan penghijauan desa
</ListItem>
<ListItem>
Daur ulang dan kreatifitas dari sampah
</ListItem>
<ListItem>
Bahaya pembakaran sampah sembarangan
</ListItem>
</List>
},
{
id: 3,
title: 'Contoh Kegiatan di Desa Darmasaba',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pelatihan membuat kompos dari sampah rumah tangga
</ListItem>
<ListItem>
Gerakan &quot;Jumat Bersih&quot; rutin
</ListItem>
<ListItem>
Workshop membuat ecobrick
</ListItem>
<ListItem>
Lomba kebersihan antar banjar
</ListItem>
<ListItem>
Sosialisasi lingkungan di sekolah dan posyandu
</ListItem>
</List>
},
]
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 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Edukasi Lingkungan
</Text>
<Text px={20} ta={'center'} fz={'h4'}>
Edukasi Lingkungan adalah bagian penting dalam membentuk perilaku masyarakat yang peduli dan bertanggung jawab terhadap kelestarian alam. Melalui program ini, masyarakat diajak untuk memahami pentingnya menjaga lingkungan demi kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper h={{base: 0, md: 350}} p={20} bg={colors['white-trans-1']}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
{v.listDeskripsi}
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

89
src/app/darmasaba/(pages)/lingkungan/gotong-royong/page.tsx Normal file
View File

@@ -0,0 +1,89 @@
import colors from '@/con/colors';
import { Stack, Box, Container, Grid, GridCol, Group, Paper, TextInput, Text, Image, Flex, Button } from '@mantine/core';
import { IconCalendar, IconMapPin, IconSearch, IconUsersGroup } from '@tabler/icons-react';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
function Page() {
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
{/* Header */}
<Box px={{ base: "md", md: 100 }}>
<BackButton />
</Box>
<Container size="lg" px="md">
<Stack align="center" gap={0} mb="xl">
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Program Gotong Royong
</Text>
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Desa Darmasaba
</Text>
</Stack>
</Container>
{/* Tabs Menu */}
<Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
<Grid align="center" justify="space-between" mb={20}>
<GridCol span={{ base: 12, md: 8 }}>
<Group gap="md" wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['Kebersihan', 'Infrastruktur', 'Sosial', 'Lingkungan'].map((kategori) => (
<Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
<Text size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
</GridCol>
<GridCol span={{ base: 12, md: 4 }}>
<TextInput
radius="lg"
placeholder="Cari Program Gotong Royong"
leftSection={<IconSearch size={18} />}
w="100%"
/>
</GridCol>
</Grid>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack gap={'xs'}>
<Image radius={20} src={'/api/img/gotong-royong.png'} w={'100%'} alt='' />
<Text fw={"bold"} fz={{ base: "h2", md: "h1" }}>Membangun Fasilitas Desa</Text>
<Group>
<Paper py={5} px={20} bg={colors['blue-button-trans']} radius={20}>
<Text c={colors['white-1']}>Sosial</Text>
</Paper>
</Group>
<Text fz={{ base: "h4", md: "h3" }}>
Program Pembangunan Fasilitas Desa Maju, Masyarakat Sejahtera.
</Text>
<Flex gap={5} align={'center'}>
<IconCalendar color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>1 April 2025</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconMapPin color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>Banjar Desa Darmasaba</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconUsersGroup color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>30 Partisipan</Text>
</Flex>
<Text fw={'bold'} fz={'md'}>Deskripsi : Program pembangunan Pura sebagai pusat spiritual dan budaya desa, melibatkan gotong royong masyarakat dalam pembangunan struktur utama serta ornamen tradisional.</Text>
<Group py={20} justify='center'>
<Button component={Link} href={'https://www.whatsapp.com/?lang=id'} bg={colors['blue-button']} >Daftar Sebagai Relawan</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
);
}
export default Page;

97
src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx Normal file
View File

@@ -0,0 +1,97 @@
import colors from '@/con/colors';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
title: 'Filosofi Tri Hita Karana',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Parahyangan: Hubungan manusia dengan Tuhan
</ListItem>
<ListItem>
Pawongan: Hubungan antar manusia
</ListItem>
<ListItem>
Palemahan: Hubungan manusia dengan alam
</ListItem>
</List>
},
{
id: 2,
title: 'Bentuk Konservasi Berdasarkan Adat',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
</ListItem>
<ListItem>
Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
</ListItem>
<ListItem>
Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
</ListItem>
<ListItem>
Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
</ListItem>
<ListItem>
Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
</ListItem>
</List>
},
{
id: 3,
title: 'Nilai Konservasi Adat',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Menjaga keseimbangan ekosistem
</ListItem>
<ListItem>
Melestarikan spiritualitas lokal dan kesucian alam
</ListItem>
<ListItem>
Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
</ListItem>
<ListItem>
Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
</ListItem>
</List>
},
]
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 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Konservasi Adat Bali
</Text>
<Text px={20} ta={'center'} fz={'h4'}>
Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
{v.listDeskripsi}
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

172
src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx Normal file
View File

@@ -0,0 +1,172 @@
import colors from '@/con/colors';
import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
icon: <IconRecycle size={50} color={colors['blue-button']} />,
deskripsi: '1. Pilah sampah sesuai jenisnya'
},
{
id: 2,
icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
deskripsi: '2. Bawa sampah ke Bank Sampah'
},
{
id: 3,
icon: <IconScale size={50} color={colors["blue-button"]} />,
deskripsi: '3. Timbang sampah di Bank Sampah'
},
{
id: 4,
icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
deskripsi: '4. Catat hasil timbangan di buku tabungan'
},
{
id: 5,
icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
},
]
const bankSampah = [
{
id: 1,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Sarana Gathi',
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
{
id: 2,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah BALI WASTU LESTARI',
alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
{
id: 3,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Jempiring Sari',
alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
},
{
id: 4,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Sarana Gathi',
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
]
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"}>
Pengelolaan Sampah (Bank Sampah)
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Bank Sampah di Desa Darmasaba berfungsi sebagai tempat pengelolaan sampah yang bertujuan untuk mengurangi limbah dan memberikan manfaat ekonomi bagi masyarakat.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={60}>
<Text fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
Mekanisme Bank Sampah di Desa Darmasaba:
</Text>
<SimpleGrid
cols={{
base: 1,
md: 1,
}}
>
{data.map((v, k) => {
return (
<Box key={k} px={28}>
<Paper p={20} bg={colors['white-trans-1']}>
<Flex gap={20} align={'center'}>
<Box>
{v.icon}
</Box>
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
</Flex>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Keterangan Bank Sampah Terdekat
</Text>
<TextInput
mb={20}
radius={'xl'}
px={{ base: 70, md: 150 }}
leftSection={<IconSearch size={20} />}
placeholder='Cari Bank Sampah Terdekat'
/>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}>
<Box>
<SimpleGrid
cols={{
base: 1,
md: 1,
}}
>
{bankSampah.map((v, k) => {
return (
<Box key={k} px={20}>
<Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
<Flex gap={20} align={'center'}>
<Box>
{v.icon}
</Box>
<Box>
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
{v.deskripsi}
</Text>
<Text fz={{ base: "md", md: "lg" }} c={'black'}>
{v.alamat}
</Text>
</Box>
</Flex>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
<Box style={{
position: 'relative',
width: '100%',
paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
height: 0,
overflow: 'hidden'
}}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 0
}}
loading="lazy"
allowFullScreen
></iframe>
</Box>
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

74
src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx Normal file
View File

@@ -0,0 +1,74 @@
import colors from '@/con/colors';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
deskripsi: 'Lingkungan Sehat',
icon: <IconHomeEco size={80} color={colors['blue-button']} />,
},
{
id: 2,
deskripsi: 'Sumber Oksigen',
icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
},
{
id: 3,
deskripsi: 'Ekonomi Berkelanjutan',
icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
},
{
id: 4,
deskripsi: 'Mencegah Bencana',
icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
},
]
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 Penghijauan Desa
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={60}>
<Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
Manfaat Program Penghijauan
</Text>
<SimpleGrid
cols={{
base: 1,
md: 4
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper p={20} bg={colors['white-trans-1']}>
<Stack flex={5}>
<Center>
{v.icon}
</Center>
<Box>
<Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
</Box>
<Group justify='center'>
<Button bg={colors['blue-button']}>Detail</Button>
</Group>
</Stack>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;