Fix responsive lading page, menu ppid, dan menu desa
This commit is contained in:
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: '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 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/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>
|
||||
</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: '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 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/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>
|
||||
</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 TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
|
||||
image: "/api/img/pembangunan-1.jpg",
|
||||
tanggal: "Selasa, 11 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
|
||||
image: "/api/img/pembangunan-2.jpg",
|
||||
tanggal: "Kamis, 13 Januari 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
|
||||
image: "/api/img/pembangunan-3.jpg",
|
||||
tanggal: "Kamis, 13 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">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 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/pemerintahan-3.jpg",
|
||||
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">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 Pemerintahan;
|
||||
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
Normal file
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.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: '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 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={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 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-1.jpeg",
|
||||
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">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 Sosial;
|
||||
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
Normal file
185
src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.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: '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 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/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>
|
||||
</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 { 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 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>
|
||||
<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 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>
|
||||
<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"
|
||||
}
|
||||
|
||||
]
|
||||
@@ -88,7 +88,7 @@ export default function Page() {
|
||||
<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"]} />
|
||||
|
||||
@@ -12,11 +12,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
|
||||
|
||||
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user