Compare commits
2 Commits
nico/10-ap
...
nico/16-ap
| Author | SHA1 | Date | |
|---|---|---|---|
| cdfbbb412c | |||
| 1138fe14d0 |
@@ -21,6 +21,7 @@
|
||||
"@mantine/carousel": "^7.16.2",
|
||||
"@mantine/charts": "^7.17.1",
|
||||
"@mantine/core": "^7.16.2",
|
||||
"@mantine/dates": "^7.17.4",
|
||||
"@mantine/dropzone": "^7.17.0",
|
||||
"@mantine/hooks": "^7.16.2",
|
||||
"@paljs/types": "^8.1.0",
|
||||
@@ -32,6 +33,7 @@
|
||||
"animate.css": "^4.1.1",
|
||||
"bun": "^1.2.2",
|
||||
"chart.js": "^4.4.8",
|
||||
"dayjs": "^1.11.13",
|
||||
"elysia": "^1.2.12",
|
||||
"embla-carousel-autoplay": "^8.5.2",
|
||||
"embla-carousel-react": "^7.1.0",
|
||||
|
||||
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
Normal file
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'FESTIVAL SENI BUDAYA KAB. BADUNG',
|
||||
image: "/api/img/tari-3.jpg",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'LATIHAN TARI REJANG GIRI PUTRI',
|
||||
image: "/api/img/tari-3.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'LATIHAN TARI REJANG GIRI PUTRI',
|
||||
image: "/api/img/tari-3.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Budaya() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/budaya-1.jpg"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 610 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Budaya</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
FESTIVAL SENI BUDAYA KAB. BADUNG
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Semeton Darmasaba yang suka menikmati seni seperti baleganjur, gong kebyar, tari, dan lainnya. Nih! ada acara keren di Puspem Badung tepatnya di Balai Budaya Giri Nata Mandala yaitu Festival Seni Budaya dari tanggal 1 November 2023 s.d. 16 November 2023.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/tari-3.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Budaya</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
PELATIHAN TARI WALI
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/tari-3.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Budaya</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
LATIHAN TARI REJANG GIRI PUTRI
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt=""
|
||||
fit="cover"
|
||||
h={282}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Budaya</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Budaya;
|
||||
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
Normal file
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023',
|
||||
image: "/api/img/ekonomi-sampingan-3.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba',
|
||||
image: "/api/img/ekonomi-sampingan.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI ',
|
||||
image: "/api/img/ekonomi-sampingan-2.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Ekonomi() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/ekonomi-utama.png"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 660 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Ekonomi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023
|
||||
</Text>
|
||||
<Text size="md" lineClamp={2}>
|
||||
Pemerintah Desa Darmasaba melalui kegiatan ketahanan pangan ini menjalankan dua kategori yaitu pertanian dan peternakan untuk kategori pertanian telah membuahkan hasil panen pertama pada hari Kamis, 24 Agustus 2023 melakukan panen bawang merah di lokasi ketahanan pangan Br. Taman, Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung. Adapun varietas bawang yang dipanen adalah Bawang Bali Karet (Batu Ijo) pada lahan seluas kurang lebih 7 are.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/ekonomi-sampingan.png"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Ekonomi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/ekonomi-sampingan-2.png"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Ekonomi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={1}>
|
||||
ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Ekonomi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Ekonomi;
|
||||
187
src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
Normal file
187
src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
|
||||
image: "/api/img/pembangunan-1.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
|
||||
image: "/api/img/pembangunan-3.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
|
||||
image: "/api/img/pembangunan-1.jpg",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Pembangunan() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, xl: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/pembangunan-1.jpg"
|
||||
alt="PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 615 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pembangunan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Sudah tertata rapi dan bersih niki Semeton Darmasaba! Sekarang pejalan kaki di seputaran jalan lingkungan Br. Gulingan bisa aman dan nyaman nie!!!
|
||||
|
||||
Pemdes Darmasaba dalam rangka memenuhi kebutuhan masyarakat khususnya warga Br. Gulingan yang memerlukan trotoarisasi guna memperlancar saluran air dan memberikan kenyamanan ketika berjalan, kini sudah menyelesaikan pembangunan trotoarisasi jalan lingkungan Br. Gulingan. Pembangunan tersebut menggunakan APBDes Darmasaba T. A. 2023 dengan realisasi sebesar Rp357.011.299,00 dari pagu yang disiapkan sebesar Rp439.066.327,00. Pembangunan trotoar tersebut melibatkan pekerja lokal dan dibantu oleh warga Br. Gulingan.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, xl: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/pembangunan-2.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={300}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pembangunan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/pembangunan-3.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={250}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pembangunan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={200}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pembangunan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Pembangunan;
|
||||
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
Normal file
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
|
||||
image: "/api/img/berita-pemerintahan.jpg",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/pemrintahan-5.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
|
||||
image: "/api/img/berita-pemerintahan.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Pemerintahan() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, xl: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/berita-pemerintahan.jpg"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 615 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pemerintahan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Pada hari Selasa, 19 November 2024, Desa Darmasaba memberikan hasil panen jagung sebagai bagian dari kegiatan Ketahanan Pangan Desa kepada anak-anak yatim, piatu, dan yatim-piatu yang berusia 0-18 Tahun. Hasil panen ini diserahkan langsung oleh I. B. Surya Prabhawa Manuaba, S.H., M.H., NL.P selaku Perbekel Darmasaba, didampingi Ketua BPD dan LPM Desa Darmasaba, serta seluruh perangkat dan staf desa. Melalui kegiatan ini, kami berharap dapat memberikan manfaat langsung bagi mereka yang membutuhkan, serta memperkuat rasa kebersamaan dan kepedulian dalam membangun ketahanan pangan di Desa Darmasaba.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, xl: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/beritapemerintahan-2.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={300}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pemerintahan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Evaluasi dan Verifikasi APBDes Darmasaba T.A. 2025
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/pemerintahan-3.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={250}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pemerintahan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
JAKSA GARDA DESA (JAGA DESA) T.A. 2025
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={200}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pemerintahan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Pemerintahan;
|
||||
188
src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
Normal file
188
src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
|
||||
image: "/api/img/berita-1.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
kategori: "Teknologi"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
kategori: "Sosial"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
|
||||
image: "/api/img/teknologi-1.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
kategori: "Teknologi"
|
||||
},
|
||||
]
|
||||
function Semua() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, xl: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/berita-1.png"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 610 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, xl: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/pembangunan-2.jpg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Pembangunan</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Tim Voli Darmasaba Raih Juara Turnamen Desa
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, xl: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={{ base: 180, xl: 250 }}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">{v.kategori}</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Semua;
|
||||
204
src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
Normal file
204
src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025',
|
||||
image: "/api/img/sosial-4.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba',
|
||||
image: "/api/img/sosial-2.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Sosial() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/sosial-1.jpeg"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 635 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025 ♻️
|
||||
Dalam semangat Hari Peduli Sampah Nasional (HPSN) 2025, Aksi Bersih Desa sukses digelar di Lombok Utara serta beberapa wilayah lain, termasuk Kabupaten Badung yang berpusat di TPS 3R Pudak Mesari, Desa Darmasaba. ?✨
|
||||
|
||||
Kegiatan ini melibatkan berbagai pihak seperti Pusdal LH BN - KLH, DKLH Provinsi Bali, DLHK Kab. Badung, Pemdes Darmasaba, BPD, LPM, TPS 3R Pudak Mesari, Lembaga Kemasyarakatan Desa, serta masyarakat Darmasaba.
|
||||
|
||||
Selain aksi bersih, Desa Darmasaba juga meluncurkan Pemuda Peduli Lingkungan sebagai garda terdepan dalam gerakan sadar lingkungan!
|
||||
|
||||
Mengapa ini penting?
|
||||
- Pengelolaan sampah harus dimulai dari sumbernya melalui pemilahan, pemanfaatan, hingga penyelesaian residu.
|
||||
- Inovasi "Galah Melah" & "BARES" menjadi contoh nyata dalam menciptakan lingkungan yang bersih & berkelanjutan.
|
||||
- Darmasaba terpilih sebagai 1 dari 8 desa se-Indonesia untuk peringatan HPSN 2025, sebuah kebanggaan sekaligus tanggung jawab bersama! ✨
|
||||
|
||||
"Kami berharap aksi ini bukan sekadar seremoni, tetapi menjadi budaya masyarakat dalam memilah dan mengelola sampah dari sumbernya." - Ibu Cokorda Istri Muter Handayani, Plt. Kabid Wilayah Bali, Pusat Pengendalian LH Bali & Nusra.
|
||||
|
||||
"Ke depan, kami menargetkan setiap desa di Badung memiliki komunitas Pemuda Peduli Lingkungan agar pengelolaan sampah lebih optimal dan berkelanjutan." - Bapak Ida Bagus Gede Arjana, Plt. Kadis DLHK Kab. Badung.
|
||||
|
||||
"Darmasaba menjadi contoh desa aktif dalam pengelolaan sampah. Kami berharap inovasi ini menginspirasi desa lain." - Ida Bagus Surya Prabhawa Manuaba, Perbekel Darmasaba.
|
||||
|
||||
Mari bersama wujudkan lingkungan yang lebih bersih, sehat, dan lestari!
|
||||
Jaga Bumi, Pilah Sampah dari Sekarang! ♻️
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/sosial-2.jpeg"
|
||||
alt="Darmasaba Smart Village"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Tim Voli Darmasaba Raih Juara Turnamen Desa
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sosial;
|
||||
186
src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
Normal file
186
src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
|
||||
image: "/api/img/teknologi-3.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
|
||||
image: "/api/img/teknologi-1.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'DARMASABA MENUJU DESA DIGITAL',
|
||||
image: "/api/img/teknologi-2.png",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Teknologi() {
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/berita-1.png"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 660 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/teknologi-1.png"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
DARMASABA DIGITAL PROJECT IS COMING! Desa Darmasaba nggak pernah berhenti berinovasi! ?
|
||||
Kali ini, kami siap menghadirkan gebrakan baru yang akan mempermudah sistem kerja di lingkungan
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/teknologi-2.png"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={1}>
|
||||
DARMASABA MENUJU DESA DIGITAL
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Teknologi;
|
||||
@@ -1,37 +1,25 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { IconCalendar, IconSearch, IconUser } from '@tabler/icons-react';
|
||||
import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
|
||||
import { IconSearch } from '@tabler/icons-react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
import Budaya from './(tabs)/budaya';
|
||||
import Ekonomi from './(tabs)/ekonomi';
|
||||
import Pemerintahan from './(tabs)/pemerintahan';
|
||||
import Semua from './(tabs)/semua';
|
||||
import Sosial from './(tabs)/sosial';
|
||||
import Teknologi from './(tabs)/teknologi';
|
||||
import Pembangunan from './(tabs)/pembangunan';
|
||||
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
|
||||
image: "/api/img/berita-1.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
{/* Header */}
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container size="lg" px="md">
|
||||
<Stack align="center" gap="xs" mb="xl">
|
||||
<Stack align="center" gap="0" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Portal Berita Darmasaba
|
||||
</Text>
|
||||
@@ -42,188 +30,71 @@ function Page() {
|
||||
</Container>
|
||||
|
||||
{/* Tabs Menu */}
|
||||
<Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
|
||||
<Grid align="center" justify="space-between">
|
||||
<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">
|
||||
<Tabs color={colors['blue-button']} variant="pills" defaultValue="semua">
|
||||
<Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
|
||||
<TabsList>
|
||||
<TabsTab value="semua">
|
||||
Semua
|
||||
</Text>
|
||||
</Paper>
|
||||
{['Pemerintahan', 'Pembangunan', 'Ekonomi', 'Sosial', 'Budaya', 'Teknologi'].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 Berita"
|
||||
leftSection={<IconSearch size={18} />}
|
||||
w="100%"
|
||||
/>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Konten Berita */}
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/berita-1.png"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 660 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Tim Voli Darmasaba Raih Juara Turnamen Desa
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</TabsTab>
|
||||
<TabsTab value="pemerintahan">
|
||||
Pemerintahan
|
||||
</TabsTab>
|
||||
<TabsTab value="pembangunan" >
|
||||
Pembangunan
|
||||
</TabsTab>
|
||||
<TabsTab value="ekonomi" >
|
||||
Ekonomi
|
||||
</TabsTab>
|
||||
<TabsTab value="sosial" >
|
||||
Sosial
|
||||
</TabsTab>
|
||||
<TabsTab value="budaya" >
|
||||
Budaya
|
||||
</TabsTab>
|
||||
<TabsTab value="teknologi" >
|
||||
Teknologi
|
||||
</TabsTab>
|
||||
</TabsList>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
|
||||
<TextInput
|
||||
w={{ base: "100%", md: "100%" }}
|
||||
radius="lg"
|
||||
placeholder="Cari Berita"
|
||||
leftSection={<IconSearch size={18} />}
|
||||
/>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<TabsPanel value='semua'>
|
||||
<Semua />
|
||||
</TabsPanel>
|
||||
<TabsPanel value='pemerintahan'>
|
||||
<Pemerintahan />
|
||||
</TabsPanel>
|
||||
<TabsPanel value="pembangunan" >
|
||||
<Pembangunan />
|
||||
</TabsPanel>
|
||||
<TabsPanel value="ekonomi" >
|
||||
<Ekonomi />
|
||||
</TabsPanel>
|
||||
<TabsPanel value="sosial" >
|
||||
<Sosial />
|
||||
</TabsPanel>
|
||||
<TabsPanel value="budaya" >
|
||||
<Budaya />
|
||||
</TabsPanel>
|
||||
<TabsPanel value="teknologi" >
|
||||
<Teknologi />
|
||||
</TabsPanel>
|
||||
|
||||
</Tabs>
|
||||
|
||||
|
||||
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
232
src/app/darmasaba/(pages)/desa/berita/page.txt
Normal file
232
src/app/darmasaba/(pages)/desa/berita/page.txt
Normal file
@@ -0,0 +1,232 @@
|
||||
{backup}
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { IconCalendar, IconSearch, IconUser } from '@tabler/icons-react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
|
||||
const dataBeritaTerbaru = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
|
||||
image: "/api/img/berita-1.png",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
{/* Header */}
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container size="lg" px="md">
|
||||
<Stack align="center" gap="0" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Portal Berita Darmasaba
|
||||
</Text>
|
||||
<Text ta="center" px="md">
|
||||
Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
{/* Tabs Menu */}
|
||||
<Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} >
|
||||
<Grid align="center" justify="space-between">
|
||||
<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>
|
||||
{['Pemerintahan', 'Pembangunan', 'Ekonomi', 'Sosial', 'Budaya', 'Teknologi'].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 Berita"
|
||||
leftSection={<IconSearch size={18} />}
|
||||
w="100%"
|
||||
/>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Konten Berita */}
|
||||
<Container size="xl" px={{ base: "md", md: "xl" }}>
|
||||
<Grid gutter={{ base: "md", md: "xl" }} pb={70}>
|
||||
{/* Berita Utama */}
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Image
|
||||
src="/api/img/berita-1.png"
|
||||
alt="Darmasaba Smart Village"
|
||||
radius="md"
|
||||
fit="cover"
|
||||
h={{ base: 450, md: 660 }}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Text size="md" lineClamp={3}>
|
||||
Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
|
||||
{/* Berita Sampingan */}
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Berita Sampingan 1 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Berita Sampingan 2 */}
|
||||
<Paper p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src="/api/img/prestasi-voli.jpeg"
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Sosial</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
Tim Voli Darmasaba Raih Juara Turnamen Desa
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Selasa, 11 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box pb={30}>
|
||||
<Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
</Box>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }}>
|
||||
{dataBeritaTerbaru.map((v, k) => {
|
||||
return (
|
||||
<Paper key={k} p="md" shadow="sm" radius="md">
|
||||
<Stack gap="sm">
|
||||
<Image
|
||||
radius="md"
|
||||
src={v.image}
|
||||
alt="Prestasi Voli"
|
||||
fit="cover"
|
||||
h={180}
|
||||
/>
|
||||
<Group>
|
||||
<Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
|
||||
<Text size="sm">Teknologi</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Text fz="lg" fw="bold" lineClamp={2}>
|
||||
{v.judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Box py={"xl"}>
|
||||
<Center>
|
||||
<Pagination total={10} />
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
64
src/app/darmasaba/(pages)/desa/galery/(tabs)/foto.tsx
Normal file
64
src/app/darmasaba/(pages)/desa/galery/(tabs)/foto.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import colors from '@/con/colors';
|
||||
import { SimpleGrid, Box, Paper, Center, Stack, Image, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/api/img/galeri-1.png",
|
||||
title: "Pendapatan",
|
||||
tanggal: "3 Mar 2025",
|
||||
judul: "Pemasangan Wifi Gratis Di Publik Desa",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/api/img/galeri-2.png",
|
||||
title: "Belanja",
|
||||
tanggal: "4 Mar 2025",
|
||||
judul: "Panen raya Desa Darmasaba",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/api/img/galeri-3.png",
|
||||
title: "Pembiayaan",
|
||||
tanggal: "5 Mar 2025",
|
||||
judul: "Kegiatan Pembangunan Pelinggih",
|
||||
}
|
||||
]
|
||||
function Foto() {
|
||||
return (
|
||||
<Box pt={20}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Center>
|
||||
<Image src={v.image} alt='' />
|
||||
</Center>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"sm"} py={10}>
|
||||
<Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
|
||||
<Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
|
||||
<Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Fusce sagittis nec arcu ac ornare. Praesent a porttitor
|
||||
felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Foto;
|
||||
64
src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
Normal file
64
src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Center, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
video: "https://www.youtube.com/embed/J2uZcZlvL7g?si=3pWy0ho77dW0E2Gt",
|
||||
tanggal: "3 Mar 2025",
|
||||
judul: "MENERIMA KUNJUNGAN STUDI TIRU DARI PEMERINTAH DESA TUA SULAWESI SELATAN",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
video: "https://www.youtube.com/embed/GX4sqS5zAzw?si=rulOAa2Ylbs4_R82",
|
||||
tanggal: "4 Mar 2025",
|
||||
judul: "Sosialisasi Pengelolaan Sampah di SD NO 3 Desa Darmasaba",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
video: "https://www.youtube.com/embed/HCY4H6ODmeA?si=0epW8PAtd6Jum90k",
|
||||
tanggal: "5 Mar 2025",
|
||||
judul: "Posyandu dan Senam Lansia Banjar Gulingan",
|
||||
}
|
||||
]
|
||||
function Video() {
|
||||
return (
|
||||
<Box pt={20}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Center>
|
||||
<Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
|
||||
<iframe style={{ borderRadius: "16px" }} width="100%"
|
||||
height="100%"
|
||||
src={v.video} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ></iframe>
|
||||
</Box>
|
||||
</Center>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"sm"} py={10}>
|
||||
<Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
|
||||
<Text fw={"bold"} fz={{ base: "sm", md: "sm" }} lineClamp={1}>{v.judul}</Text>
|
||||
<Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Fusce sagittis nec arcu ac ornare. Praesent a porttitor
|
||||
felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Video;
|
||||
100
src/app/darmasaba/(pages)/desa/galery/backup.txt
Normal file
100
src/app/darmasaba/(pages)/desa/galery/backup.txt
Normal file
@@ -0,0 +1,100 @@
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Box, Center, Container, Flex, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { IconPhoto, IconSearch, IconVideo } from '@tabler/icons-react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/api/img/galeri-1.png",
|
||||
title: "Pendapatan",
|
||||
tanggal: "3 Mar 2025",
|
||||
judul: "Pemasangan Wifi Gratis Di Publik Desa",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/api/img/galeri-2.png",
|
||||
title: "Belanja",
|
||||
tanggal: "4 Mar 2025",
|
||||
judul: "Panen raya Desa Darmasaba",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/api/img/galeri-3.png",
|
||||
title: "Pembiayaan",
|
||||
tanggal: "5 Mar 2025",
|
||||
judul: "Kegiatan Pembangunan Pelinggih",
|
||||
}
|
||||
]
|
||||
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="xs" mb="xl">
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Galeri Kegiatan Desa Darmasaba
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Flex justify={"space-between"} align={"center"} pb={50}>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent' p={50}>
|
||||
<Flex c={colors["blue-button"]} align={"center"} gap={10}>
|
||||
<IconPhoto size={35} />
|
||||
<Text fz={"h4"}>Foto</Text>
|
||||
</Flex>
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent' p={50}>
|
||||
<Flex c={colors["blue-button"]} align={"center"} gap={10}>
|
||||
<IconVideo size={35} />
|
||||
<Text fz={"h4"}>Video</Text>
|
||||
</Flex>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
<TextInput
|
||||
placeholder='Cari Galeri'
|
||||
radius="lg"
|
||||
leftSection={<IconSearch size={20} />}
|
||||
w={{ base: "25%", md: "30%" }}
|
||||
/>
|
||||
</Flex>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Center>
|
||||
<Image src={v.image} alt='' />
|
||||
</Center>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"sm"} py={10}>
|
||||
<Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
|
||||
<Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
|
||||
<Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Fusce sagittis nec arcu ac ornare. Praesent a porttitor
|
||||
felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,32 +1,11 @@
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Box, Center, Container, Flex, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { Box, Container, Grid, GridCol, Group, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
|
||||
import { IconPhoto, IconSearch, IconVideo } from '@tabler/icons-react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
import Foto from './(tabs)/foto';
|
||||
import Video from './(tabs)/video';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/api/img/galeri-1.png",
|
||||
title: "Pendapatan",
|
||||
tanggal: "3 Mar 2025",
|
||||
judul: "Pemasangan Wifi Gratis Di Publik Desa",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/api/img/galeri-2.png",
|
||||
title: "Belanja",
|
||||
tanggal: "4 Mar 2025",
|
||||
judul: "Panen raya Desa Darmasaba",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/api/img/galeri-3.png",
|
||||
title: "Pembiayaan",
|
||||
tanggal: "5 Mar 2025",
|
||||
judul: "Kegiatan Pembangunan Pelinggih",
|
||||
}
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
|
||||
@@ -42,56 +21,40 @@ function Page() {
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Flex justify={"space-between"} align={"center"} pb={50}>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent' p={50}>
|
||||
<Flex c={colors["blue-button"]} align={"center"} gap={10}>
|
||||
<IconPhoto size={35} />
|
||||
<Text fz={"h4"}>Foto</Text>
|
||||
</Flex>
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent' p={50}>
|
||||
<Flex c={colors["blue-button"]} align={"center"} gap={10}>
|
||||
<IconVideo size={35} />
|
||||
<Text fz={"h4"}>Video</Text>
|
||||
</Flex>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
<TextInput
|
||||
placeholder='Cari Galeri'
|
||||
radius="lg"
|
||||
leftSection={<IconSearch size={20} />}
|
||||
w={{ base: "25%", md: "30%" }}
|
||||
/>
|
||||
</Flex>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 3,
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<Box key={k}>
|
||||
<Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Box>
|
||||
<Center>
|
||||
<Image src={v.image} alt='' />
|
||||
</Center>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"sm"} py={10}>
|
||||
<Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
|
||||
<Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
|
||||
<Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Fusce sagittis nec arcu ac ornare. Praesent a porttitor
|
||||
felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Tabs color={colors['blue-button']} defaultValue="foto">
|
||||
<Grid align='center'>
|
||||
<GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
|
||||
<Group>
|
||||
<TabsList>
|
||||
<TabsTab style={{ color: colors['blue-button'] }} fz={"xl"} value="foto" leftSection={<IconPhoto color={colors['blue-button']} size={45} />}>
|
||||
Foto
|
||||
</TabsTab>
|
||||
<TabsTab style={{ color: colors['blue-button'] }} fz={"xl"} value="video" leftSection={<IconVideo color={colors['blue-button']} size={45} />}>
|
||||
Video
|
||||
</TabsTab>
|
||||
</TabsList>
|
||||
</Group>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
|
||||
<TextInput
|
||||
w={{ base: "100%", md: "100%" }}
|
||||
radius="lg"
|
||||
placeholder="Cari Berita"
|
||||
leftSection={<IconSearch size={18} />}
|
||||
/>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
<TabsPanel value="foto">
|
||||
<Foto />
|
||||
</TabsPanel>
|
||||
|
||||
<TabsPanel value="video">
|
||||
<Video />
|
||||
</TabsPanel>
|
||||
|
||||
</Tabs>
|
||||
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Beda Biodata Diri
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Belum Kawin
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -8,8 +8,8 @@ function Page() {
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Domisili Organisasi
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Kelahiran
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Kelakuan Baik (Pengantar SKCK)
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Kematian
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Penghasilan
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Tempat Usaha
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Tidak Mampu
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Usaha
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -7,8 +7,8 @@ function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
|
||||
<Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
|
||||
Surat Keterangan Yatim Piatu
|
||||
</Text>
|
||||
</Container>
|
||||
@@ -11,67 +11,67 @@ const data = [
|
||||
id: 1,
|
||||
images: "/api/img/test.png",
|
||||
name: "Surat Keterangan Domisili Organisasi",
|
||||
link: "/darmasaba/desa/layanan/domisili"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-domisili"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/test-3.jpeg",
|
||||
name: "Surat Keterangan Penghasilan",
|
||||
link: "/darmasaba/desa/layanan/penghasilan"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-penghasilan"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/domisili.jpeg",
|
||||
name: "Surat Keterangan Tidak Mampu",
|
||||
link: "/darmasaba/desa/layanan/tidakmampu"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-tidak-mampu"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/kelahiran.jpeg",
|
||||
name: "Surat Keterangan Kelahiran",
|
||||
link: "/darmasaba/desa/layanan/kelahiran"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kelahiran"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: "/api/img/keterangan-usaha.jpeg",
|
||||
name: "Surat Keterangan Usaha",
|
||||
link: "/darmasaba/desa/layanan/usaha"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-usaha"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: "/api/img/kematian.jpeg",
|
||||
name: "Surat Keterangan Kematian",
|
||||
link: "/darmasaba/desa/layanan/kematian"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kematian"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
images: "/api/img/tempatusaha.jpeg",
|
||||
name: "Surat Keterangan Tempat Usaha",
|
||||
link: "/darmasaba/desa/layanan/tempatusaha"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-tempat-usaha"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
images: "/api/img/belumkawin.jpeg",
|
||||
name: "Surat Keterangan Belum Kawin",
|
||||
link: "/darmasaba/desa/layanan/belumkawin"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-belum-kawin"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
images: "/api/img/berkelakuan-baik.jpeg",
|
||||
name: "Surat Keterangan Kelakuan Baik",
|
||||
link: "/darmasaba/desa/layanan/skck"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kelakuan-baik"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
images: "/api/img/biodata.jpeg",
|
||||
name: "Surat Keterangan Beda Biodata Diri",
|
||||
link: "/darmasaba/desa/layanan/biodata"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-beda-biodata-diri"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
images: "/api/img/yatim.jpeg",
|
||||
name: "Surat Keterangan Yatim Piatu",
|
||||
link: "/darmasaba/desa/layanan/yatim"
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-yatim-piatu"
|
||||
}
|
||||
|
||||
]
|
||||
@@ -81,14 +81,14 @@ export default function Page() {
|
||||
const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
|
||||
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Stack align="center" gap={0}>
|
||||
{/* Bagian Layanan */}
|
||||
<Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Text fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Layanan Desa Darmasaba
|
||||
</Text>
|
||||
<Text
|
||||
@@ -96,7 +96,7 @@ export default function Page() {
|
||||
Informasi dan Pelayanan Administrasi Digital
|
||||
</Text>
|
||||
<TextInput
|
||||
py={20}
|
||||
pt={20}
|
||||
w={{ base: "70%", md: "50%" }}
|
||||
placeholder="Cari Layanan"
|
||||
leftSection={<IconSearch size={20} />}
|
||||
@@ -106,7 +106,7 @@ export default function Page() {
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
{/* Bagian Pelayanan Surat Keterangan */}
|
||||
<Box py={10}>
|
||||
<Box pb={10}>
|
||||
<Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
|
||||
</Box>
|
||||
<SimpleGrid
|
||||
@@ -209,7 +209,7 @@ export default function Page() {
|
||||
</Box>
|
||||
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
|
||||
<Box py={15}>
|
||||
<Text fz={"h4"} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
|
||||
<Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
|
||||
</Box>
|
||||
<Text fz={{ base: "sm", md: 'h3' }} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
|
||||
<List type="ordered" pb={20}>
|
||||
@@ -219,7 +219,7 @@ export default function Page() {
|
||||
</List>
|
||||
{/* Bagian Pelayanan Telunjuk Sakti Desa */}
|
||||
<Box py={15}>
|
||||
<Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
|
||||
<Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
|
||||
</Box>
|
||||
<Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
|
||||
tanggal: 'Jumat, 26 April 2025',
|
||||
jam: '16:00 WITA',
|
||||
lokasi: 'Wantilan Adat Desa',
|
||||
deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
|
||||
tanggal: 'Jumat, 26 April 2025',
|
||||
jam: '16:00 WITA',
|
||||
lokasi: 'Wantilan Adat Desa',
|
||||
deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
|
||||
tanggal: 'Jumat, 26 April 2025',
|
||||
jam: '16:00 WITA',
|
||||
lokasi: 'Wantilan Adat Desa',
|
||||
deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
|
||||
tanggal: 'Jumat, 26 April 2025',
|
||||
jam: '16:00 WITA',
|
||||
lokasi: 'Wantilan Adat Desa',
|
||||
deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
|
||||
tanggal: 'Jumat, 26 April 2025',
|
||||
jam: '16:00 WITA',
|
||||
lokasi: 'Wantilan Adat Desa',
|
||||
deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Adat & Budaya
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman adat & budaya di Desa Darmasaba.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
|
||||
tanggal: 'Selasa, 30 April 2025',
|
||||
jam: '09:00 WITA',
|
||||
lokasi: 'Perpustakaan Desa',
|
||||
deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
|
||||
tanggal: 'Selasa, 30 April 2025',
|
||||
jam: '09:00 WITA',
|
||||
lokasi: 'Perpustakaan Desa',
|
||||
deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
|
||||
tanggal: 'Selasa, 30 April 2025',
|
||||
jam: '09:00 WITA',
|
||||
lokasi: 'Perpustakaan Desa',
|
||||
deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
|
||||
tanggal: 'Selasa, 30 April 2025',
|
||||
jam: '09:00 WITA',
|
||||
lokasi: 'Perpustakaan Desa',
|
||||
deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
|
||||
tanggal: 'Selasa, 30 April 2025',
|
||||
jam: '09:00 WITA',
|
||||
lokasi: 'Perpustakaan Desa',
|
||||
deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Digitalisasi Desa
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman digitalisasi desa
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
|
||||
tanggal: 'Rabu, 23 April 2025',
|
||||
jam: '13:00 WITA',
|
||||
lokasi: 'Aula Kantor Desa',
|
||||
deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
|
||||
tanggal: 'Rabu, 23 April 2025',
|
||||
jam: '13:00 WITA',
|
||||
lokasi: 'Aula Kantor Desa',
|
||||
deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
|
||||
tanggal: 'Rabu, 23 April 2025',
|
||||
jam: '13:00 WITA',
|
||||
lokasi: 'Aula Kantor Desa',
|
||||
deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
|
||||
tanggal: 'Rabu, 23 April 2025',
|
||||
jam: '13:00 WITA',
|
||||
lokasi: 'Aula Kantor Desa',
|
||||
deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
|
||||
tanggal: 'Rabu, 23 April 2025',
|
||||
jam: '13:00 WITA',
|
||||
lokasi: 'Aula Kantor Desa',
|
||||
deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Ekonomi & UMKM
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman ekonomi & umkm
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Gotong Royong Bersih Sungai dan Drainase',
|
||||
tanggal: 'Minggu, 21 April 2025',
|
||||
jam: '06:30 WITA',
|
||||
lokasi: 'Titik Kumpul: Poskamling RW 02',
|
||||
deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Gotong Royong Bersih Sungai dan Drainase',
|
||||
tanggal: 'Minggu, 21 April 2025',
|
||||
jam: '06:30 WITA',
|
||||
lokasi: 'Titik Kumpul: Poskamling RW 02',
|
||||
deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Gotong Royong Bersih Sungai dan Drainase',
|
||||
tanggal: 'Minggu, 21 April 2025',
|
||||
jam: '06:30 WITA',
|
||||
lokasi: 'Titik Kumpul: Poskamling RW 02',
|
||||
deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Gotong Royong Bersih Sungai dan Drainase',
|
||||
tanggal: 'Minggu, 21 April 2025',
|
||||
jam: '06:30 WITA',
|
||||
lokasi: 'Titik Kumpul: Poskamling RW 02',
|
||||
deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Gotong Royong Bersih Sungai dan Drainase',
|
||||
tanggal: 'Minggu, 21 April 2025',
|
||||
jam: '06:30 WITA',
|
||||
lokasi: 'Titik Kumpul: Poskamling RW 02',
|
||||
deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Lingkungan & Bencana
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman lingkungan & bencana
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Lomba Video Pendek Hari Lingkungan',
|
||||
tanggal: 'Deadline: 28 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Online Submission',
|
||||
deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Lomba Video Pendek Hari Lingkungan',
|
||||
tanggal: 'Deadline: 28 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Online Submission',
|
||||
deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Pendidikan & Kepemudaan
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman pendidikan & kepemudaan
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,96 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
|
||||
|
||||
const dataPengumuman = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
|
||||
tanggal: 'Sabtu, 20 April 2025',
|
||||
jam: '08:00 WITA',
|
||||
lokasi: 'Balai Banjar Desa Darmasaba',
|
||||
deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
|
||||
},
|
||||
]
|
||||
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" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Sosial & Kesehatan
|
||||
</Text>
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait pengumuman sosial & kesehatan
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
{dataPengumuman.map((v, k) => {
|
||||
return (
|
||||
<Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
|
||||
<Text fz={'h3'}>{v.judul}</Text>
|
||||
<Group style={{ color: 'black' }} pb={20}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">{v.tanggal}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">{v.jam}</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconMapPin size={18} />
|
||||
<Text size="sm">{v.lokasi}</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Text ta={'justify'}>
|
||||
{v.deskripsi}
|
||||
</Text>
|
||||
</Paper>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,65 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Calendar } from '@mantine/dates';
|
||||
import { Stack, Box, Container, Text, Grid, Paper, GridCol, Center, SimpleGrid } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
|
||||
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 gap="0" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
|
||||
Jadwal Rapat
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }} >
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Center>
|
||||
<Calendar size='xl' />
|
||||
</Center>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }} >
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
xl: 3,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Hari Ini</Text>
|
||||
<Text fz={'lg'} >Senin, 13 Februari 2023</Text>
|
||||
<Text fz={'lg'} >09:00 - 12:00</Text>
|
||||
<Text fz={'lg'} >12:00 - 15:00</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Besok</Text>
|
||||
<Text fz={'lg'} >Selasa, 14 Februari 2023</Text>
|
||||
<Text fz={'lg'} >09:00 - 12:00</Text>
|
||||
<Text fz={'lg'} >12:00 - 15:00</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Minggu Depan</Text>
|
||||
<Text fz={'lg'} >Senin, 20 Februari 2023</Text>
|
||||
<Text fz={'lg'} >09:00 - 12:00</Text>
|
||||
<Text fz={'lg'} >12:00 - 15:00</Text>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,49 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, Image, Grid, GridCol, Paper, TextInput, Center, Button } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import BackButton from '../../../layanan/_com/BackButto';
|
||||
|
||||
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 gap="0" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
|
||||
Pendaftaran UMKM
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Grid>
|
||||
<GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }}>
|
||||
<Center>
|
||||
<Image src={'/api/img/market.png'} w={{ base: 300, md: 500, lg: 530, xl: 550 }} alt='' />
|
||||
</Center>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'} h={'500'}>
|
||||
<Text ta={'center'} fz={{ base: "1.5rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
|
||||
Pendaftaran UMKM
|
||||
</Text>
|
||||
<Stack pt={20}>
|
||||
<TextInput placeholder='Nama Lengkap' />
|
||||
<TextInput placeholder='Alamat' />
|
||||
<TextInput placeholder='No. Telepon' />
|
||||
<TextInput placeholder='Email' />
|
||||
<TextInput placeholder='Nama UMKM' />
|
||||
<Button bg={colors['blue-button']} fullWidth>Daftar Sekarang</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,9 +1,61 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Box, Container, Text, TextInput, SimpleGrid, Notification, Flex, Anchor, Paper } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { Anchor, Box, Container, Flex, Group, Notification, Paper, SimpleGrid, Stack, Text, TextInput, UnstyledButton } from '@mantine/core';
|
||||
import { IconCalendar, IconClock, IconSearch } from '@tabler/icons-react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
import { IconSearch } from '@tabler/icons-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const dataKategori = [
|
||||
{
|
||||
id: 1,
|
||||
kategori: 'Sosial & Kesehatan',
|
||||
jumlah: 5,
|
||||
link: '/darmasaba/desa/pengumuman/sosial-&-kesehatan'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
kategori: 'Ekonomi & UMKM',
|
||||
jumlah: 7,
|
||||
link: '/darmasaba/desa/pengumuman/ekonomi-&-umkm'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
kategori: 'Pendidikan & Kepemudaan',
|
||||
jumlah: 9,
|
||||
link: '/darmasaba/desa/pengumuman/pendidikan-&-kepemudaan'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
kategori: 'Lingkungan & Bencana',
|
||||
jumlah: 6,
|
||||
link: '/darmasaba/desa/pengumuman/lingkungan-&-bencana'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
kategori: 'Adat & Budaya',
|
||||
jumlah: 8,
|
||||
link: '/darmasaba/desa/pengumuman/adat-&-budaya'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
kategori: 'Digitalisasi Desa',
|
||||
jumlah: 6,
|
||||
link: '/darmasaba/desa/pengumuman/digitalisasi-desa'
|
||||
},
|
||||
]
|
||||
const dataPenting = [
|
||||
{
|
||||
id: 1,
|
||||
judul: 'Jadwal Rapat',
|
||||
jumlah: 5,
|
||||
link: '/darmasaba/desa/pengumuman/jadwal-rapat'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'Pendaftaran UMKM',
|
||||
jumlah: 7,
|
||||
link: '/darmasaba/desa/pengumuman/pendaftaran-umkm'
|
||||
}
|
||||
]
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
|
||||
@@ -12,11 +64,11 @@ function Page() {
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container size="lg" px="md">
|
||||
<Stack align="center" gap="xs" mb="xl">
|
||||
<Stack align="center" gap="0" >
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
|
||||
Pengumuman Desa Darmasaba
|
||||
</Text>
|
||||
<Text ta="center" px="md">
|
||||
<Text ta="center" px="md" pb={10}>
|
||||
Informasi dan pengumuman resmi terkait kegiatan dan kebijakan Desa Darmasaba
|
||||
</Text>
|
||||
<TextInput
|
||||
@@ -41,32 +93,36 @@ function Page() {
|
||||
<Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
<Flex pt={20} gap={"md"} justify={"space-between"}>
|
||||
<Text fz={"xs"} c={"black"}>1 Februari 2025</Text>
|
||||
<Text fz={"xs"} c={"black"}>09:00 WITA</Text>
|
||||
<Group style={{ color: 'black' }}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Kamis, 13 Januari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">09:00 WITA</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Anchor>
|
||||
<Text fz={"xs"}>Baca Selengkapnya</Text>
|
||||
<Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
|
||||
</Anchor>
|
||||
</Flex>
|
||||
</Notification>
|
||||
<Paper p={"md"}>
|
||||
<Stack gap={"xs"}>
|
||||
<Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Kategori</Text>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Pengumuman</Text>
|
||||
<Text fz={"md"} c={"black"}>5</Text>
|
||||
</Flex>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Kegiatan</Text>
|
||||
<Text fz={"md"} c={"black"}>10</Text>
|
||||
</Flex>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Informasi</Text>
|
||||
<Text fz={"md"} c={"black"}>12</Text>
|
||||
</Flex>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Layanan</Text>
|
||||
<Text fz={"md"} c={"black"}>6</Text>
|
||||
</Flex>
|
||||
{dataKategori.map((v, k) => {
|
||||
return (
|
||||
<UnstyledButton component={Link} href={v.link} key={k}>
|
||||
<Paper bg={colors["BG-trans"]} p={5}>
|
||||
<Group px={3} justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>{v.kategori}</Text>
|
||||
<Text fz={"md"} c={"black"}>{v.jumlah}</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
</UnstyledButton>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Notification color='yellow' styles={{ title: { fontWeight: "bold" } }} withCloseButton={false} title="Informasi">
|
||||
@@ -74,25 +130,36 @@ function Page() {
|
||||
<Text fz={"sm"} fw={"bold"} c={"black"}>LELANG PEMASANGAN CCTV DESA DARMASABA</Text>
|
||||
<Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
|
||||
</Stack>
|
||||
<Flex pt={20} gap={"md"} justify={"space-between"}>
|
||||
<Text fz={"xs"} c={"black"}>2 Februari 2025</Text>
|
||||
<Text fz={"xs"} c={"black"}>10:00 WITA</Text>
|
||||
<Flex pt={20} gap={"md"} justify={"space-between"}><Group style={{ color: 'black' }}>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">Kamis, 2 Februari 2025</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconClock size={18} />
|
||||
<Text size="sm">10:00 WITA</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Anchor>
|
||||
<Text fz={"xs"}>Baca Selengkapnya</Text>
|
||||
<Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
|
||||
</Anchor>
|
||||
</Flex>
|
||||
</Notification>
|
||||
<Paper p={"md"}>
|
||||
<Stack gap={"xs"}>
|
||||
<Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Pengumuman Penting</Text>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Jadwal Rapat</Text>
|
||||
<Text fz={"md"} c={"black"}>5</Text>
|
||||
</Flex>
|
||||
<Flex justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>Pendaftaran UMKM</Text>
|
||||
<Text fz={"md"} c={"black"}>10</Text>
|
||||
</Flex>
|
||||
{dataPenting.map((v, k) => {
|
||||
return (
|
||||
<UnstyledButton component={Link} href={v.link} key={k}>
|
||||
<Paper bg={colors["BG-trans"]} p={5}>
|
||||
<Group px={3} justify={"space-between"}>
|
||||
<Text fz={"md"} c={"black"}>{v.judul}</Text>
|
||||
<Text fz={"md"} c={"black"}>{v.jumlah}</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
</UnstyledButton>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
|
||||
@@ -10,28 +10,28 @@ const datamap = [
|
||||
images: "/api/img/tps.png",
|
||||
name: "TPS3R Pudak Mesari",
|
||||
kategori: "Lingkungan",
|
||||
link: "/darmasaba/desa/potensi/tps",
|
||||
link: "/darmasaba/desa/potensi/tps3r-pudak-mesari",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/ack.png",
|
||||
name: "Bumdes Pudak Mesari",
|
||||
kategori: "Ekonomi",
|
||||
link: "/darmasaba/desa/potensi/bumdes"
|
||||
link: "/darmasaba/desa/potensi/bumdes-pudak-mesari",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/taman-beji.jpg",
|
||||
name: "Taman Beji Cengana",
|
||||
kategori: "Wisata",
|
||||
link: "/darmasaba/desa/potensi/taman"
|
||||
link: "/darmasaba/desa/potensi/taman-beji-cengana",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/waterpark.png",
|
||||
name: "Gumuh Sari Water Park",
|
||||
kategori: "Wisata",
|
||||
link: "/darmasaba/desa/potensi/gumuh"
|
||||
link: "/darmasaba/desa/potensi/gumuh-sari-water-park",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -45,14 +45,14 @@ const datamap = [
|
||||
images: "/api/img/warungumkm.jpg",
|
||||
name: "Kawasan Kuliner",
|
||||
kategori: "Ekonomi",
|
||||
link: "/darmasaba/desa/potensi/kuliner"
|
||||
link: "/darmasaba/desa/potensi/kawasan-kuliner"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
images: "/api/img/ikm.png",
|
||||
name: "IKM Berbasis Pengolahan Pangan",
|
||||
kategori: "Ekonomi",
|
||||
link: "/darmasaba/desa/potensi/ikm"
|
||||
link: "/darmasaba/desa/potensi/ikm-berbasis-pengolahan-pangan"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
@@ -66,21 +66,21 @@ const datamap = [
|
||||
images: "/api/img/peternakanlele.jpg",
|
||||
name: "Peternakan Ikan Lele",
|
||||
kategori: "Ekonomi",
|
||||
link: "/darmasaba/desa/potensi/lele"
|
||||
link: "/darmasaba/desa/potensi/peternakan-ikan-lele"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
images: "/api/img/jogging.jpg",
|
||||
name: "Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa",
|
||||
kategori: "Lingkungan",
|
||||
link: "/darmasaba/desa/potensi/joging"
|
||||
link: "/darmasaba/desa/potensi/jogging-track-tegeh-aban-karang-gadon-dan-munduk-uma-desa"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
images: "/api/img/damtanahputih.jpeg",
|
||||
name: "Dam Tanah Putih",
|
||||
kategori: "Wisata",
|
||||
link: "/darmasaba/desa/potensi/dam"
|
||||
link: "/darmasaba/desa/potensi/dam-tanah-putih"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
@@ -94,24 +94,26 @@ const datamap = [
|
||||
images: "/api/img/potong-daging.png",
|
||||
name: "Pemotongan Daging",
|
||||
kategori: "Ekonomi",
|
||||
link: "/darmasaba/desa/potensi/pemotongan"
|
||||
link: "/darmasaba/desa/potensi/pemotongan-daging"
|
||||
},
|
||||
|
||||
]
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"} >
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
<Box pb={30}>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Box>
|
||||
<Stack gap={0}>
|
||||
<Flex justify={"space-between"} align={"center"} px={10}>
|
||||
<Flex justify={"space-between"} align={"center"} >
|
||||
<Box>
|
||||
<Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
Potensi Desa
|
||||
</Text>
|
||||
<Text ta={"justify"} py={10}>
|
||||
<Text ta={"justify"} >
|
||||
Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import colors from "@/con/colors";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
import { useTransitionRouter } from 'next-view-transitions';
|
||||
@@ -7,7 +8,7 @@ import { useTransitionRouter } from 'next-view-transitions';
|
||||
export default function BackButton() {
|
||||
const router = useTransitionRouter()
|
||||
return (
|
||||
<ActionIcon variant="transparent" onClick={() => router.back()}>
|
||||
<ActionIcon bg={colors["blue-button"]} onClick={() => router.back()}>
|
||||
<IconArrowLeft />
|
||||
</ActionIcon>
|
||||
);
|
||||
|
||||
@@ -13,18 +13,18 @@ import SemuaPerbekel from './ui/semuaPerbekel';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
|
||||
<Box px={50}>
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<Stack align='center' gap={0}>
|
||||
<Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Text fz={{base: "h1", md: "2.5rem"}} c={colors["blue-button"]} fw={"bold"}>
|
||||
Profile Desa
|
||||
</Text>
|
||||
</Stack>
|
||||
</Container>
|
||||
<Box w={{ base: "100%", md: "100%" }} px={50}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<ProfileDesa />
|
||||
<SejarahDesa />
|
||||
<VisimisiDesa />
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,194 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Divider, Group, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
|
||||
|
||||
const dataDokter = [
|
||||
{
|
||||
id: 1,
|
||||
nama: 'dr. Adi Putra',
|
||||
spesilisasi: 'Dokter Umum',
|
||||
jadwal: 'Senin-Jumat, 08:00-12:00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama: 'drg. Ratna Dewi',
|
||||
spesilisasi: 'Dokter Gigi',
|
||||
jadwal: 'Senin, Rabu, Jumat 08:00-14:00'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama: 'Bidan Komang',
|
||||
spesilisasi: 'Kebidanan',
|
||||
jadwal: 'Setiap hari, 08:00-16:00'
|
||||
},
|
||||
]
|
||||
const dataBiaya = [
|
||||
{
|
||||
id: 1,
|
||||
layanan: 'Poli Umum',
|
||||
tarif: '15.000',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
layanan: 'Poli Gigi',
|
||||
tarif: '20.000',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
layanan: 'Imunisasi Dasar',
|
||||
tarif: 'Gratis',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
layanan: 'Konsultasi KB',
|
||||
tarif: 'Gratis',
|
||||
},
|
||||
]
|
||||
|
||||
function Page() {
|
||||
const rows = dataDokter.map((element) => (
|
||||
<TableTr key={element.nama}>
|
||||
<TableTd fz={'h4'}>{element.nama}</TableTd>
|
||||
<TableTd fz={'h4'}>{element.spesilisasi}</TableTd>
|
||||
<TableTd fz={'h4'}>{element.jadwal}</TableTd>
|
||||
</TableTr>
|
||||
));
|
||||
|
||||
const rows2 = dataBiaya.map((element2) => (
|
||||
<TableTr key={element2.layanan}>
|
||||
<TableTd fz={'h4'}>{element2.layanan}</TableTd>
|
||||
<TableTd fz={'h4'}>{element2.tarif}</TableTd>
|
||||
</TableTr>
|
||||
));
|
||||
|
||||
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 }}>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper radius={10}>
|
||||
<Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
|
||||
<Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
|
||||
Detail Lengkap Fasilitas Kesehatan
|
||||
</Text>
|
||||
</Box>
|
||||
<Box p={'md'} >
|
||||
<Stack gap={'xs'}>
|
||||
{/* Informasi Umum */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Informasi Umum
|
||||
</Text>
|
||||
<Divider />
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Nama Fasilitas : <Text span fz={'h4'}>UPTD Puskesmas Abiansemal III</Text>
|
||||
</Text>
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Alamat : <Text span fz={'h4'}>Jl. Ratna, Sibang Kaja</Text>
|
||||
</Text>
|
||||
<Text pb={10} fz={'h4'} fw={"bold"}>
|
||||
Jam Operasional: : <Text span fz={'h4'}>08:00-16:00 WITA (Senin-Sabtu)</Text>
|
||||
</Text>
|
||||
{/* Layanan Unggulan */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Layanan Unggulan
|
||||
</Text>
|
||||
<Divider />
|
||||
<List pb={10}>
|
||||
<ListItem fz={'h4'}>Poli Umum</ListItem>
|
||||
<ListItem fz={'h4'}>Poli Gigi</ListItem>
|
||||
<ListItem fz={'h4'}>Imunisasi</ListItem>
|
||||
<ListItem fz={'h4'}>Ibu/KB</ListItem>
|
||||
<ListItem fz={'h4'}>Laboratorium Dasar</ListItem>
|
||||
<ListItem fz={'h4'}>Farmasi</ListItem>
|
||||
<ListItem fz={'h4'}>Konsultasi Gizi</ListItem>
|
||||
</List>
|
||||
{/* Tenaga Medis */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Dokter & Tenaga Medis
|
||||
</Text>
|
||||
<Divider />
|
||||
<Table pb={10} highlightOnHover withTableBorder withColumnBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh fz={'h4'}>Nama</TableTh>
|
||||
<TableTh fz={'h4'}>Spesialisasi</TableTh>
|
||||
<TableTh fz={'h4'}>Jadwal</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>{rows}</TableTbody>
|
||||
</Table>
|
||||
{/* Fasilitas Pendukung */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Fasilitas Pendukung
|
||||
</Text>
|
||||
<Divider />
|
||||
<List pb={10}>
|
||||
<ListItem fz={'h4'}>Apotek dengan ketersediaan obat lengkap</ListItem>
|
||||
<ListItem fz={'h4'}>Ruang tunggu ber-AC</ListItem>
|
||||
<ListItem fz={'h4'}>Area bermain anak</ListItem>
|
||||
<ListItem fz={'h4'}>Ambulans 24 jam</ListItem>
|
||||
<ListItem fz={'h4'}>Toilet khusus disabilitas</ListItem>
|
||||
<ListItem fz={'h4'}>Tempat parkir luas</ListItem>
|
||||
</List>
|
||||
{/* Dokter */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Dokter & Tenaga Medis
|
||||
</Text>
|
||||
<Divider />
|
||||
<Table highlightOnHover withTableBorder withColumnBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh fz={'h4'}>Layanan</TableTh>
|
||||
<TableTh fz={'h4'}>Tarif</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>{rows2}</TableTbody>
|
||||
</Table>
|
||||
<Text fz={'h6'} pb={10} fw={"bold"}>
|
||||
* Gratis dengan BPJS Kesehatan
|
||||
</Text>
|
||||
{/* Prosedur Pendaftaran */}
|
||||
<Text fz={'h4'} fw={"bold"}>
|
||||
Prosedur Pendaftaran
|
||||
</Text>
|
||||
<Divider />
|
||||
<List type='ordered' pb={10} >
|
||||
<ListItem fz={'h4'}>Pendaftaran dibuka pukul 07:30 WITA</ListItem>
|
||||
<ListItem fz={'h4'}>Bawa KTP dan Kartu BPJS (jika ada)</ListItem>
|
||||
<ListItem fz={'h4'}>Ambil nomor antrian di loket pendaftaran</ListItem>
|
||||
<ListItem fz={'h4'}>Pengunjung baru wajib mengisi formulir pendaftaran</ListItem>
|
||||
<ListItem fz={'h4'}>Pendaftaran online tersedia melalui aplikasi S-Sehat</ListItem>
|
||||
</List>
|
||||
<Paper p={'lg'} bg={colors['blue-button-trans']}>
|
||||
<Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Kontak Darurat</Text>
|
||||
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
|
||||
Telepon : <Text span fz={'h4'}>(0361) 123456</Text>
|
||||
</Text>
|
||||
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
|
||||
WhatsApp : <Text span fz={'h4'}>081234567890</Text>
|
||||
</Text>
|
||||
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
|
||||
Email : <Text span fz={'h4'}>puskesmasabiansemal3@gmail.com</Text>
|
||||
</Text>
|
||||
</Paper>
|
||||
<Paper p={'lg'} w={{ base: "100%", md: "100%" }}>
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.272172359321!2d115.21836257533302!3d-8.569807186941553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23e9d99b9395f%3A0xb002795fdcb33b30!2sUPTD%20Puskesmas%20Abiansemal%20III!5e0!3m2!1sid!2sid!4v1744792682341!5m2!1sid!2sid" width="600" height="450" style={{ border: 2, width: "100%", borderRadius: 10 }} loading="lazy"></iframe>
|
||||
</Paper>
|
||||
<Group>
|
||||
<Button fz={'lg'} bg={colors['blue-button']}>
|
||||
Download Brosur Layanan (PDF)
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -3,6 +3,7 @@ import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor,
|
||||
import React from 'react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { BarChart } from '@mantine/charts';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
||||
const dataKematian = [
|
||||
@@ -144,7 +145,7 @@ function Page() {
|
||||
<Text fz={'h4'}>
|
||||
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
|
||||
</Text>
|
||||
<Anchor c={'black'} variant='transparent'>
|
||||
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
|
||||
<Text c={'black'} fz={'h4'}>
|
||||
Detail Lengkap {'>>'}
|
||||
</Text>
|
||||
@@ -165,7 +166,7 @@ function Page() {
|
||||
<Text fz={'h4'}>
|
||||
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
|
||||
</Text>
|
||||
<Anchor c={'black'} variant='transparent'>
|
||||
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
|
||||
<Text c={'black'} fz={'h4'}>
|
||||
Detail Lengkap {'>>'}
|
||||
</Text>
|
||||
@@ -186,7 +187,7 @@ function Page() {
|
||||
<Text fz={'h4'}>
|
||||
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
|
||||
</Text>
|
||||
<Anchor c={'black'} variant='transparent'>
|
||||
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
|
||||
<Text c={'black'} fz={'h4'}>
|
||||
Detail Lengkap {'>>'}
|
||||
</Text>
|
||||
|
||||
@@ -35,7 +35,7 @@ function Page() {
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Flex justify={'space-between'} align={'center'}>
|
||||
<BackButton />
|
||||
<ActionIcon variant='transparent' component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital/login'}>
|
||||
<ActionIcon variant='transparent' component={Link} href={'/login'}>
|
||||
<IconUser color={colors["blue-button"]} size={30} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
@@ -13,11 +13,10 @@ function Page() {
|
||||
</Text>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
<Box pb={30}>
|
||||
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DASAR HUKUM PEMBENTUKAN PPID</Text>
|
||||
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DESA DARMASABA</Text>
|
||||
<Box>
|
||||
<Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DASAR HUKUM PEMBENTUKAN PPID DESA DARMASABA</Text>
|
||||
</Box>
|
||||
<List>
|
||||
<List p={'lg'}>
|
||||
<ListItem fz={{ base: 'md', md: 'h4' }}>
|
||||
<Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
|
||||
<Text fw={"bold"} span>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Box, Button, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { ActionIcon, Box, Button, Center, Checkbox, Combobox, ComboboxOption, Group, Input, InputBase, Paper, SimpleGrid, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
|
||||
import { IconDownload } from '@tabler/icons-react';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
const data = [
|
||||
{
|
||||
@@ -30,7 +33,91 @@ const data = [
|
||||
},
|
||||
]
|
||||
|
||||
const jenisInformasi = [
|
||||
{
|
||||
id: 1,
|
||||
jenis: 'Keuangan Desa'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
jenis: 'Pembangunan Desa'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
jenis: 'Data Demografi'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
jenis: 'Lainnya'
|
||||
},
|
||||
]
|
||||
|
||||
const memperolehInformasi = [
|
||||
{
|
||||
id: 1,
|
||||
jenis: 'Melihat/Membaca/Mendengarkan/Mencatat'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
jenis: 'Mendapatkan Salinan Informasi (Hardcopy)'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
jenis: 'Mendapatkan Salinan Informasi (Softcopy)'
|
||||
}
|
||||
]
|
||||
|
||||
const mendapatkanInformasi = [
|
||||
{
|
||||
id: 1,
|
||||
jenis: 'Mengambil Langsung'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
jenis: 'Dikirim via Post'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
jenis: 'Dikirim via Email'
|
||||
}
|
||||
]
|
||||
function Page() {
|
||||
const combobox = useCombobox({
|
||||
onDropdownClose: () => combobox.resetSelectedOption(),
|
||||
});
|
||||
|
||||
const combobox2 = useCombobox({
|
||||
onDropdownClose: () => combobox2.resetSelectedOption(),
|
||||
});
|
||||
|
||||
const combobox3 = useCombobox({
|
||||
onDropdownClose: () => combobox3.resetSelectedOption(),
|
||||
});
|
||||
|
||||
const [value, setValue] = useState<string | null>(null);
|
||||
const [value2, setValue2] = useState<string | null>(null);
|
||||
const [value3, setValue3] = useState<string | null>(null);
|
||||
|
||||
|
||||
|
||||
const options = jenisInformasi.map((item) => (
|
||||
<ComboboxOption value={item.jenis} key={item.id}>
|
||||
{item.jenis}
|
||||
</ComboboxOption>
|
||||
))
|
||||
|
||||
const options2 = memperolehInformasi.map((item) => (
|
||||
<ComboboxOption value={item.jenis} key={item.id}>
|
||||
{item.jenis}
|
||||
</ComboboxOption>
|
||||
))
|
||||
|
||||
const options3 = mendapatkanInformasi.map((item) => (
|
||||
<ComboboxOption value={item.jenis} key={item.id}>
|
||||
{item.jenis}
|
||||
</ComboboxOption>
|
||||
))
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
@@ -47,7 +134,9 @@ function Page() {
|
||||
pb={30}
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 4,
|
||||
md: 2,
|
||||
lg: 3,
|
||||
xl: 4
|
||||
}}>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
@@ -74,7 +163,136 @@ function Page() {
|
||||
Unduh Dokumen
|
||||
</Button>
|
||||
</Center>
|
||||
<Image src={'/api/img/formulirpermohonan.png'} alt=''/>
|
||||
<Group justify='center'>
|
||||
<Paper p={'xl'} bg={colors['white-1']}>
|
||||
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
|
||||
<TextInput
|
||||
styles={{ input: { padding: 20 } }}
|
||||
py={10}
|
||||
placeholder='Nama Lengkap'
|
||||
/>
|
||||
<TextInput
|
||||
styles={{ input: { padding: 20 } }}
|
||||
placeholder='NIK'
|
||||
/>
|
||||
<TextInput
|
||||
styles={{ input: { padding: 20 } }}
|
||||
py={10}
|
||||
placeholder='No.Telepon'
|
||||
/>
|
||||
<TextInput
|
||||
styles={{ input: { padding: 20 } }}
|
||||
placeholder="Alamat"
|
||||
/>
|
||||
<TextInput
|
||||
py={10}
|
||||
styles={{ input: { padding: 20 } }}
|
||||
placeholder="Email"
|
||||
/>
|
||||
<TextInput
|
||||
styles={{ input: { padding: 20 } }}
|
||||
placeholder="Alamat"
|
||||
/>
|
||||
{/* ComboBox */}
|
||||
<Box py={10}>
|
||||
<Text fz={'sm'}>Jenis Informasi yang diminta</Text>
|
||||
<Combobox
|
||||
store={combobox}
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue(val);
|
||||
combobox.closeDropdown();
|
||||
}}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<Combobox.Chevron />}
|
||||
onClick={() => combobox.toggleDropdown()}
|
||||
rightSectionPointerEvents="none"
|
||||
>
|
||||
{value || <Input.Placeholder>--Pilih Jenis Informasi--</Input.Placeholder>}
|
||||
</InputBase>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<Combobox.Options>{options}</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
</Box>
|
||||
<Textarea
|
||||
placeholder='Tujuan Penggunaan Informasi'
|
||||
/>
|
||||
{/* ComboBox2 */}
|
||||
<Box py={10}>
|
||||
<Text fz={'sm'}>Cara Memperoleh Informasi</Text>
|
||||
<Combobox
|
||||
store={combobox2}
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue2(val);
|
||||
combobox2.closeDropdown();
|
||||
}}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<Combobox.Chevron />}
|
||||
onClick={() => combobox2.toggleDropdown()}
|
||||
rightSectionPointerEvents="none"
|
||||
>
|
||||
{value2 || <Input.Placeholder>--Pilih Cara Memperoleh--</Input.Placeholder>}
|
||||
</InputBase>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<Combobox.Options>{options2}</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
</Box>
|
||||
{/* ComboBox3 */}
|
||||
<Box pb={10}>
|
||||
<Text fz={'sm'}>Cara Mendapatkan Salinan Informasi</Text>
|
||||
<Combobox
|
||||
store={combobox3}
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue3(val);
|
||||
combobox3.closeDropdown();
|
||||
}}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<Combobox.Chevron />}
|
||||
onClick={() => combobox3.toggleDropdown()}
|
||||
rightSectionPointerEvents="none"
|
||||
>
|
||||
{value3 || <Input.Placeholder>--Pilih Cara Mendapatkan--</Input.Placeholder>}
|
||||
</InputBase>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<Combobox.Options>{options3}</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
</Box>
|
||||
<Box pb={10}>
|
||||
<Checkbox
|
||||
label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta"
|
||||
/>
|
||||
</Box>
|
||||
<Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
|
||||
Kirim Permohonan
|
||||
</Button>
|
||||
</Paper>
|
||||
</Group>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
@@ -9,31 +9,35 @@ function Page() {
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Profil Singkat PPID Desa Darmasaba
|
||||
</Text>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Profil Singkat PPID Desa Darmasaba
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Paper p={"xl"} bg={colors['white-trans-1']}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Flex align={"center"} gap={50}>
|
||||
<Image src={"/api/img/darmasaba-icon.png"} h={{ base: 100, md: 150 }} alt='' />
|
||||
<Text fz={{ base: "h3", md: "2.5rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
|
||||
<Image src={"/api/img/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
|
||||
<Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Divider my={"md"} />
|
||||
{/* biodata perbekel */}
|
||||
<Box px={50} pb={30}>
|
||||
<Box px={{base: 0, md: 50}} pb={30}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
md: 2,
|
||||
md: 1,
|
||||
lg: 1,
|
||||
xl: 2,
|
||||
}}
|
||||
>
|
||||
<Box px={{ base: 0, md: 80 }}>
|
||||
<Box px={{ base: 0, md: 50 }}>
|
||||
<Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
|
||||
<Stack gap={0}>
|
||||
<Center>
|
||||
<Image pt={{ base: 0, md: 30 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 326 }} alt='' />
|
||||
<Image pt={{ base: 0, md: 90 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
|
||||
</Center>
|
||||
<Paper
|
||||
bg={colors['blue-button']}
|
||||
@@ -42,10 +46,10 @@ function Page() {
|
||||
px={{ base: 20, md: 20 }}
|
||||
|
||||
>
|
||||
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
|
||||
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
|
||||
I.B. Surya Prabhawa Manuaba,
|
||||
</Text>
|
||||
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
|
||||
<Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
|
||||
S.H.,M.H.,NL.P.
|
||||
</Text>
|
||||
</Paper>
|
||||
@@ -54,52 +58,52 @@ function Page() {
|
||||
</Box>
|
||||
<Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Biodata</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis.</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis.</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Riwayat Karir</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
<Box pb={30}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Pengalaman Organisasi</Text>
|
||||
<Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
|
||||
<List>
|
||||
<Box px={20}>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
<Box pb={20}>
|
||||
<Text pb={20} fz={{ base: "h3", md: "h2" }} fw={'bold'}>Program Kerja Unggulan</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Pemberdayaan Ekonmi dan UMKM</Text>
|
||||
<Text pb={20} fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Pemberdayaan Ekonomi dan UMKM</Text>
|
||||
<List>
|
||||
<Box px={20}>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
|
||||
<List>
|
||||
<Box px={20}>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
|
||||
<ListItem fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
@@ -36,7 +36,7 @@ function Page() {
|
||||
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
|
||||
MISI PPID
|
||||
</Text>
|
||||
<Box px={20} >
|
||||
<Box >
|
||||
<List type='ordered'>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan pengelolaan dan pelayanan informasi yang berkualitas, benar dan bertanggung jawab</ListItem>
|
||||
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Membangun dan mengembangkan sistem penyediaan dan layanan informasi.</ListItem>
|
||||
|
||||
@@ -9,27 +9,27 @@ const data = [
|
||||
{
|
||||
judul: "PENGUATAN TATA LAKSANA",
|
||||
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
|
||||
link: "/darmasaba/desaantikorupsi/tatalaksana"
|
||||
link: "/darmasaba/desa-anti-korupsi/penguatan-tata-laksana"
|
||||
},
|
||||
{
|
||||
judul: "PENGUATAN PENGAWASAN",
|
||||
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
|
||||
link: "/darmasaba/desaantikorupsi/pengawasan"
|
||||
link: "/darmasaba/desa-anti-korupsi/penguatan-pengawasan"
|
||||
},
|
||||
{
|
||||
judul: "PENGUATAN KUALITAS PELAYANAN PUBLIK",
|
||||
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
|
||||
link: "/darmasaba/desaantikorupsi/pelayanan"
|
||||
link: "/darmasaba/desa-anti-korupsi/penguatan-kualitas-pelayanan-publik"
|
||||
},
|
||||
{
|
||||
judul: "PENGUATAN PARTISIPASI MASYARAKAT",
|
||||
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
|
||||
link: "/darmasaba/desaantikorupsi/partisipasi"
|
||||
link: "/darmasaba/desa-anti-korupsi/penguatan-partisipasi-masyarakat"
|
||||
},
|
||||
{
|
||||
judul: "KEARIFAN LOKAL",
|
||||
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
|
||||
link: "/darmasaba/desaantikorupsi/lokal"
|
||||
link: "/darmasaba/desa-anti-korupsi/kearifan-lokal"
|
||||
}
|
||||
]
|
||||
function Page() {
|
||||
@@ -6,7 +6,7 @@ import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={32}>
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={22}>
|
||||
<Group px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Group>
|
||||
@@ -6,7 +6,7 @@ import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={32}>
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={22}>
|
||||
<Group px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Group>
|
||||
@@ -6,7 +6,7 @@ import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={32}>
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={22}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
@@ -15,47 +15,47 @@ const data = [
|
||||
images: "/api/img/penghargaan-2.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba1"
|
||||
link: "/darmasaba/penghargaan/juara-2-lomba-video-pendek-potensi-dan-peluang-investasi-di-desa-kabupaten-badung-2024"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/penghargaan-3.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba2"
|
||||
link: "/darmasaba/penghargaan/juara-2-duta-invenstasi-kabupaten-badung-2024"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/penghargaan-1.png",
|
||||
juara: "Juara Favorit",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba3"
|
||||
link: "/darmasaba/penghargaan/juara-favorit-lomba-video-pendek-potensi-dan-peluang-investasi-di-desa-kabupaten-badung-2024"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/penghargaan-2.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba1"
|
||||
link: "/darmasaba/penghargaan/juara-2-lomba-video-pendek-potensi-dan-peluang-investasi-di-desa-kabupaten-badung-2024"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: "/api/img/penghargaan-3.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba2"
|
||||
link: "/darmasaba/penghargaan/juara-2-duta-invenstasi-kabupaten-badung-2024"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: "/api/img/penghargaan-1.png",
|
||||
juara: "Juara Favorit",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba3"
|
||||
link: "/darmasaba/penghargaan/juara-favorit-lomba-video-pendek-potensi-dan-peluang-investasi-di-desa-kabupaten-badung-2024"
|
||||
}
|
||||
]
|
||||
export default function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={22}>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
@@ -125,7 +125,7 @@ function Slider() {
|
||||
plugins={[autoplay.current]}
|
||||
onMouseEnter={autoplay.current.stop}
|
||||
onMouseLeave={autoplay.current.reset}
|
||||
w={width}
|
||||
w={{base: 500, md: 800, lg: 900 , xl: width}}
|
||||
height={height}
|
||||
slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
|
||||
slideGap={{ base: "xl", sm: "md" }}
|
||||
|
||||
@@ -11,7 +11,7 @@ function Page() {
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Text ta={"center"} fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
|
||||
Peringkat 5 Dalam Ajang Bergengsi Mangupura Award
|
||||
</Text>
|
||||
<Text
|
||||
@@ -11,7 +11,7 @@ function Page() {
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024
|
||||
</Text>
|
||||
<Text
|
||||
@@ -9,7 +9,7 @@ function Page() {
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
|
||||
<Text ta={"center"} fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
|
||||
Juara 3 Turnamen Bola Voli Mangupura Cup 2024
|
||||
</Text>
|
||||
<Text
|
||||
@@ -10,21 +10,21 @@ const data = [
|
||||
title: "Olahraga dan Kepemudaan",
|
||||
description: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
link: "/darmasaba/prestasi/voli"
|
||||
link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Hukum dan Kesadaran Masyarakat",
|
||||
description: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
|
||||
image: "/api/img/prestasilombahukum.png",
|
||||
link: "/darmasaba/prestasi/hukum"
|
||||
link: "/darmasaba/prestasi-desa/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Tata Kelola dan Inovasi Desa",
|
||||
description: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
|
||||
image: "/api/img/prestasi-peringkat-5.jpeg",
|
||||
link: "/darmasaba/desa/prestasi/mangupura"
|
||||
link: "/darmasaba/prestasi-desa/peringkat-5-dalam-ajang-bergengsi-mangupura-award"
|
||||
}
|
||||
]
|
||||
function Page() {
|
||||
@@ -102,7 +102,7 @@ function Apbdes() {
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Group pb={80} justify='center'>
|
||||
<Button component={Link} href="/darmasaba/apbdesa" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>
|
||||
<Button component={Link} href="/darmasaba/apbdes" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</>
|
||||
|
||||
@@ -108,7 +108,9 @@ function Kepuasan() {
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
sm: 3
|
||||
md: 1,
|
||||
lg: 1,
|
||||
xl: 3
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
|
||||
@@ -4,8 +4,10 @@ import {
|
||||
Box,
|
||||
Card,
|
||||
Flex,
|
||||
Grid,
|
||||
Image,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text
|
||||
} from "@mantine/core";
|
||||
@@ -53,109 +55,144 @@ function LandingPage() {
|
||||
md: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"md"} flex={1}>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
bg={"white"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
>
|
||||
<Image
|
||||
src={"/assets/images/darmasaba-icon.png"}
|
||||
alt="icon"
|
||||
sizes="100%"
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
bg={"white"}
|
||||
>
|
||||
<Image
|
||||
src={"/api/img/pudak-icon.png"}
|
||||
alt="icon"
|
||||
sizes={"100%"}
|
||||
fit="contain"
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Stack flex={2} gap={0} justify="end" c={colors["blue-button"]}>
|
||||
{/* <Text
|
||||
fz={{
|
||||
base: "1.5rem",
|
||||
md: "1.4rem",
|
||||
}}
|
||||
>
|
||||
Pemerintah Desa
|
||||
</Text>
|
||||
<Title>DARMASABA</Title> */}
|
||||
<Paper bg={colors["blue-button"]} p={10} w={400}>
|
||||
<Flex align={"center"} justify={"space-between"}>
|
||||
<Box>
|
||||
<Text c={colors["white-1"]} fz={"sm"}>
|
||||
Jadwal Kerja
|
||||
</Text>
|
||||
<Paper w={175} p={5} bg={colors["white-1"]}>
|
||||
<Flex justify={"space-between"} align={"center"}>
|
||||
<Grid
|
||||
>
|
||||
<Grid.Col span={{
|
||||
base: 2,
|
||||
sm: 3,
|
||||
md: 3,
|
||||
xl: 2
|
||||
}}>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
bg={"white"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
>
|
||||
<Image
|
||||
src={"/assets/images/darmasaba-icon.png"}
|
||||
alt="icon"
|
||||
sizes="100%"
|
||||
/>
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{
|
||||
base: 2,
|
||||
sm: 3,
|
||||
md: 3,
|
||||
xl: 2
|
||||
}}>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
bg={"white"}
|
||||
>
|
||||
<Image
|
||||
src={"/api/img/pudak-icon.png"}
|
||||
alt="icon"
|
||||
sizes={"100%"}
|
||||
fit="contain"
|
||||
/>
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{
|
||||
base: 8,
|
||||
sm: 12,
|
||||
md: 12,
|
||||
xl: 8
|
||||
}}>
|
||||
<Paper
|
||||
pos={"relative"}
|
||||
bg={colors["blue-button"]}
|
||||
p={10}
|
||||
w={{ base: "100%", sm: "auto", md: "auto" }}
|
||||
flex={{ base: "1", sm: "1", md: "1" }}
|
||||
>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 2,
|
||||
sm: 1,
|
||||
md: 2,
|
||||
}}
|
||||
spacing={{ base: "xs", md: "md" }}
|
||||
>
|
||||
<Box>
|
||||
<Text c={colors["white-1"]} fz={"sm"}>
|
||||
Jadwal Kerja
|
||||
</Text>
|
||||
<Paper
|
||||
w={{ base: "100%", sm: "100%", md: "auto" }}
|
||||
p={5}
|
||||
bg={colors["white-1"]}
|
||||
>
|
||||
<Flex justify={"space-between"} align={"center"}>
|
||||
<Box>
|
||||
<Text fz={"sm"}>
|
||||
Buka
|
||||
</Text>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
08:00
|
||||
</Text>
|
||||
</Box>
|
||||
<Text fz={"lg"} fw={"bold"}>-</Text>
|
||||
<Box>
|
||||
<Text fz={"sm"}>
|
||||
Tutup
|
||||
</Text>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
16:00
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={colors["white-1"]} fz={"sm"}>
|
||||
Rabu, 10 Maret 2025
|
||||
</Text>
|
||||
<Paper
|
||||
w={{ base: "100%", sm: "100%", md: "auto" }}
|
||||
p={5}
|
||||
bg={colors["white-1"]}
|
||||
>
|
||||
<Box>
|
||||
<Text fz={"sm"}>
|
||||
Buka
|
||||
</Text>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
08:00
|
||||
Sabtu - Minggu
|
||||
</Text>
|
||||
</Box>
|
||||
<Text fz={"lg"} fw={"bold"}>-</Text>
|
||||
<Box>
|
||||
<Text fz={"sm"}>
|
||||
Tutup
|
||||
</Text>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
16:00
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={colors["white-1"]} fz={"sm"}>
|
||||
Rabu, 10 Maret 2025
|
||||
</Text>
|
||||
<Paper w={175} p={5} bg={colors["white-1"]}>
|
||||
<Box>
|
||||
<Text fz={"sm"}>
|
||||
Buka
|
||||
</Text>
|
||||
<Text fw={"bold"} fz={"lg"}>
|
||||
Sabtu - Minggu
|
||||
</Text>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
|
||||
</Grid>
|
||||
|
||||
</Flex>
|
||||
<ModuleView />
|
||||
<SosmedView />
|
||||
@@ -164,7 +201,7 @@ function LandingPage() {
|
||||
}} >Sampaikan saran dan masukan guna kemajuan dalam pembangunan. Semua lebih mudah melalui fitur interaktif</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
|
||||
</Stack>
|
||||
<Stack
|
||||
justify={"end"}
|
||||
|
||||
@@ -27,68 +27,68 @@ const data = [
|
||||
id: 1,
|
||||
images: "/api/img/test.png",
|
||||
name: "Surat Keterangan Domisili Organisasi",
|
||||
link: "/darmasaba/desa/layanan/domisili"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-domisili"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/test-3.jpeg",
|
||||
name: "Surat Keterangan Penghasilan",
|
||||
link: "/darmasaba/desa/layanan/penghasilan"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-penghasilan"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/domisili.jpeg",
|
||||
name: "Surat Keterangan Tidak Mampu",
|
||||
link: "/darmasaba/desa/layanan/tidakmampu"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-tidak-mampu"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/kelahiran.jpeg",
|
||||
name: "Surat Keterangan Kelahiran",
|
||||
link: "/darmasaba/desa/layanan/kelahiran"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kelahiran"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: "/api/img/keterangan-usaha.jpeg",
|
||||
name: "Surat Keterangan Usaha",
|
||||
link: "/darmasaba/desa/layanan/usaha"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-usaha"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: "/api/img/kematian.jpeg",
|
||||
name: "Surat Keterangan Kematian",
|
||||
link: "/darmasaba/desa/layanan/kematian"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kematian"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
images: "/api/img/tempatusaha.jpeg",
|
||||
name: "Surat Keterangan Tempat Usaha",
|
||||
link: "/darmasaba/desa/layanan/tempatusaha"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-tempat-usaha"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
images: "/api/img/belumkawin.jpeg",
|
||||
name: "Surat Keterangan Belum Kawin",
|
||||
link: "/darmasaba/desa/layanan/belumkawin"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-belum-kawin"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
images: "/api/img/berkelakuan-baik.jpeg",
|
||||
name: "Surat Keterangan Kelakuan Baik",
|
||||
link: "/darmasaba/desa/layanan/skck"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-kelakuan-baik"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
images: "/api/img/biodata.jpeg",
|
||||
name: "Surat Keterangan Beda Biodata Diri",
|
||||
link: "/darmasaba/desa/layanan/biodata"
|
||||
},
|
||||
{
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-beda-biodata-diri"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
images: "/api/img/yatim.jpeg",
|
||||
name: "Surat Keterangan Yatim Piatu",
|
||||
link: "/darmasaba/desa/layanan/yatim"
|
||||
}
|
||||
link: "/darmasaba/desa/layanan/surat-keterangan-yatim-piatu"
|
||||
}
|
||||
|
||||
]
|
||||
const textHeading = {
|
||||
|
||||
@@ -26,28 +26,28 @@ const datamap = [
|
||||
images: "/api/img/tps.png",
|
||||
name: "TPS3R Pudak Mesari",
|
||||
deskripsi: "TPS 3R Pudak Mesari Darmasaba layak mendapat penghargaan demikian apresiasi dari Delterra Sosial Indonesia nie Semeton Darmasaba!, Hal tersebut dikarenakan walaupun baru berdiri namun TPS 3R kebanggaan Desa Darmasaba tersebut sudah berjalan dengan sangat baik. ",
|
||||
link: "/darmasaba/desa/potensi/tps"
|
||||
link: "/darmasaba/desa/potensi/tps3r-pudak-mesari"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/ack.png",
|
||||
name: "Bumdes Pudak Mesari",
|
||||
deskripsi: "Bumdes Pudak Mesari sangat membantu warga desa Darmasaba dalam mengelola dan membangun sebuah desa yang lebih baik lagi",
|
||||
link: "/darmasaba/desa/potensi/bumdes"
|
||||
link: "/darmasaba/desa/potensi/bumdes-pudak-mesari"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/taman-beji.jpg",
|
||||
name: "Taman Beji Cengana",
|
||||
deskripsi: "Tirta Klebutan di Pura Taman Beji Cengana di Desa Adat Darmasaba, Badung, selain dipercaya nunas Taksu serta pembersihan diri. Tersemat juga asal usul cerita ditemukannya Tirta Klebutan yang tepat berada di pinggir Tukad Cengana tersebut.",
|
||||
link: "/darmasaba/desa/potensi/taman"
|
||||
link: "/darmasaba/desa/potensi/taman-beji-cengana"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/waterpark.png",
|
||||
name: "Gumuh Sari Water Park",
|
||||
deskripsi: "Gumuh Sari Rekreasi atau waterpark, tempat wisata yang asyik dan seru untuk kamu sekeluarga! Tempat liburan di Bali memang seakan nggak ada habisnya. Selalu ada aja destinasi wisata seru yang bisa jadi wishlist. Ada banyak banget tempat wisata yang kamu kunjungi di Bali, mulai dari wisata alam, wisata modern, sampai wisata air.",
|
||||
link: "/darmasaba/desa/potensi/gumuh"
|
||||
link: "/darmasaba/desa/potensi/gumuh-sari-water-park"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -8,21 +8,21 @@ const data = [
|
||||
title: "Olahraga dan Kepemudaan",
|
||||
deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
|
||||
image: "/api/img/prestasi-voli.jpeg",
|
||||
link: "/darmasaba/prestasi/voli"
|
||||
link: "/darmasaba/prestasi/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Hukum dan Kesadaran Masyarakat",
|
||||
deskripsi: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
|
||||
image: "/api/img/prestasilombahukum.png",
|
||||
link: "/darmasaba/prestasi/hukum"
|
||||
link: "/darmasaba/prestasi-desa/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Tata Kelola dan Inovasi Desa",
|
||||
deskripsi: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
|
||||
image: "/api/img/prestasi-peringkat-5.jpeg",
|
||||
link: "/darmasaba/prestasi/mangupura"
|
||||
link: "/darmasaba/prestasi-desa/peringkat-5-dalam-ajang-bergengsi-mangupura-award"
|
||||
}
|
||||
]
|
||||
function Prestasi() {
|
||||
@@ -33,7 +33,7 @@ function Prestasi() {
|
||||
<Text ta={"center"} fz={"3.4rem"}>Prestasi Desa</Text>
|
||||
<Text fz={"1.4rem"} ta={"center"}>Kami bangga dengan apa yang telah dicapai desa kita hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.</Text>
|
||||
<Center pt={20}>
|
||||
<Button radius={"lg"} fz={"h4"} color={colors["blue-button"]} component={Link} href="/darmasaba/prestasi">Selengkapnya</Button>
|
||||
<Button radius={"lg"} fz={"h4"} color={colors["blue-button"]} component={Link} href="/darmasaba/prestasi-desa">Selengkapnya</Button>
|
||||
</Center>
|
||||
</Container>
|
||||
<Box py={50}>
|
||||
@@ -66,7 +66,7 @@ function Prestasi() {
|
||||
<Box p={"lg"}>
|
||||
<Text
|
||||
c={"white"}
|
||||
size={"1.5rem"}
|
||||
fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem"}}
|
||||
ta={"center"}
|
||||
>
|
||||
{v.title}
|
||||
@@ -75,7 +75,7 @@ function Prestasi() {
|
||||
<Text
|
||||
fw={"bold"}
|
||||
c={"white"}
|
||||
size={"3.5rem"}
|
||||
fz={{base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem"}}
|
||||
ta={"center"}
|
||||
>
|
||||
{v.deskripsi}
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function SDGS() {
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
<Center>
|
||||
<Button component={Link} href={"/darmasaba/sdgsdesa"} radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
|
||||
<Button component={Link} href={"/darmasaba/sdgs-desa"} radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
@@ -8,6 +8,7 @@ import 'react-simple-toasts/dist/style.css';
|
||||
import 'react-simple-toasts/dist/theme/dark.css';
|
||||
import "./globals.css";
|
||||
import '@mantine/charts/styles.css';
|
||||
import '@mantine/dates/styles.css';
|
||||
|
||||
|
||||
|
||||
|
||||
56
src/app/login/page.tsx
Normal file
56
src/app/login/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconUserFilled } from '@tabler/icons-react';
|
||||
import Link from 'next/link';
|
||||
import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
|
||||
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 }} >
|
||||
<Center>
|
||||
<Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
|
||||
</Center>
|
||||
<Box>
|
||||
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
|
||||
E-Book Desa Darmasaba
|
||||
</Title>
|
||||
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
|
||||
Silahkan masukkan akun anda untuk menjelajahi berbagai macam buku di perpustakaan digital
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={50}>
|
||||
<Group justify='center'>
|
||||
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
|
||||
<Stack align='center'>
|
||||
<Title order={2} fw={'bold'} c={colors['blue-button']}>
|
||||
Login
|
||||
</Title>
|
||||
<IconUserFilled size={80} color={colors['blue-button']} />
|
||||
<Box>
|
||||
<Text c={colors['blue-button']} fw={'bold'}>Masuk Untuk Akses Lebih Banyak Buku</Text>
|
||||
<TextInput placeholder='Email' />
|
||||
<TextInput py={20} placeholder='Password' />
|
||||
<Box pb={20} >
|
||||
<Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
|
||||
</Box>
|
||||
<Flex justify={'center'} align={'center'}>
|
||||
<Text>Belum punya akun? </Text>
|
||||
<Button variant='transparent' component={Link} href={'/registrasi'}>
|
||||
<Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
105
src/app/percobaan/page.tsx
Normal file
105
src/app/percobaan/page.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
'use client'
|
||||
import { Box, Container, Flex, Grid, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import React from 'react';
|
||||
|
||||
const tx = `
|
||||
Untuk menambahkan fitur berbagi nomor WhatsApp di kode yang Anda miliki, saya akan menjelaskan beberapa pendekatan yang bisa digunakan. Biasanya ini dilakukan dengan membuat link yang ketika diklik akan membuka aplikasi WhatsApp dengan nomor tujuan yang sudah diatur.
|
||||
Berikut adalah cara mengimplementasikannya pada kode React Anda:
|
||||
`
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack>
|
||||
<Grid>
|
||||
<Grid.Col span={{
|
||||
base: 12,
|
||||
sm: 6,
|
||||
md: 4,
|
||||
xl: 10
|
||||
}}>
|
||||
<Box h={"200"} bg={"blue"}>1</Box>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{
|
||||
base: 12,
|
||||
sm: 6,
|
||||
md: 8,
|
||||
xl: 2
|
||||
}}>
|
||||
<Box h={"200"} bg={"red"}>1</Box>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<SimpleGrid cols={{
|
||||
base: 1,
|
||||
sm: 2,
|
||||
md: 4,
|
||||
xl: 20
|
||||
}}>
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Box key={i} h={"60"} bg={"blue"}>1</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Flex >
|
||||
<Box w={400} h={"200"} bg={"blue"}>1</Box>
|
||||
<Box w={400} bg={"red"}>
|
||||
<Text fz={"42"} lineClamp={1} >{tx}</Text>
|
||||
<Text bg={"blue"} style={{
|
||||
fontSize: "2rem"
|
||||
}} lineClamp={1} >{tx}</Text>
|
||||
<Title order={1}>apa kabar</Title>
|
||||
</Box>
|
||||
|
||||
</Flex>
|
||||
|
||||
<Page2/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
const Halaman = [Halaman1, Halaman2, Halaman3]
|
||||
|
||||
function Page2() {
|
||||
const page = useSearchParams().get("p");
|
||||
if (!page) return <Container >
|
||||
<Stack>
|
||||
<Text>halo 1</Text>
|
||||
{Array.from({ length: 4 }).map((v, k) => <Skeleton h={100} key={k} />)}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
|
||||
return (
|
||||
<Container w={"100%"}>
|
||||
<Stack>
|
||||
<Text>halo 2</Text>
|
||||
{Halaman[Number(page)-1]()}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function Halaman1() {
|
||||
return <Stack bg={"blue"}>
|
||||
ini halaman 1
|
||||
</Stack>
|
||||
}
|
||||
|
||||
|
||||
function Halaman2() {
|
||||
return <Stack bg={"red"}>
|
||||
ini halaman 2
|
||||
</Stack>
|
||||
}
|
||||
|
||||
|
||||
function Halaman3() {
|
||||
return <Stack bg={"grape"}>
|
||||
ini halaman 3
|
||||
</Stack>
|
||||
}
|
||||
|
||||
67
src/app/registrasi/page.tsx
Normal file
67
src/app/registrasi/page.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import Link from 'next/link';
|
||||
import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
|
||||
|
||||
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 }} >
|
||||
<Center>
|
||||
<Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
|
||||
</Center>
|
||||
<Box>
|
||||
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
|
||||
E-Book Desa Darmasaba
|
||||
</Title>
|
||||
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
|
||||
Silahkan lengkapi data diri anda untuk mengakses e-book desa
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={50}>
|
||||
<Group justify='center'>
|
||||
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
|
||||
<Stack align='center'>
|
||||
<Title order={2} fw={'bold'} c={colors['blue-button']}>
|
||||
Registrasi
|
||||
</Title>
|
||||
<Box>
|
||||
<TextInput placeholder='Nama Lengkap'
|
||||
label='Nama Lengkap'
|
||||
/>
|
||||
<TextInput py={10} placeholder='Email'
|
||||
label='Email'
|
||||
/>
|
||||
<TextInput placeholder='day / month / year'
|
||||
label='Tanggal Lahir'
|
||||
/>
|
||||
<TextInput py={10} placeholder='08xx-xxxx-xxxx'
|
||||
label='Nomor Telepon'
|
||||
/>
|
||||
<TextInput pb={10} placeholder='Password'
|
||||
label='Password'
|
||||
/>
|
||||
<Box pb={10}>
|
||||
<Checkbox
|
||||
|
||||
label="Saya menyetujui syarat dan ketentuan yang berlaku"
|
||||
/>
|
||||
</Box>
|
||||
<Box pb={20} >
|
||||
<Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
Reference in New Issue
Block a user