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

Sinkronisasi UI & API Admin - User Submenu Berita

Browse Source
This commit is contained in:
nico
2025-08-08 12:07:44 +08:00
parent 0ac9fa1f53
commit afc7bced44
30 changed files with 646 additions and 2332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx Normal file
View File

@@ -0,0 +1,168 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
import {
Badge,
Box,
Button,
Card,
Center,
Container,
Divider,
Grid,
GridCol,
Group,
Image,
Pagination,
Paper,
SimpleGrid,
Skeleton,
Stack,
Text,
Title,
} from '@mantine/core';
import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
export default function Content({ kategori }: { kategori: string }) {
const router = useTransitionRouter();
const [page, setPage] = useState(1);
const state = useProxy(stateDashboardBerita.berita);
const featuredState = useProxy(stateDashboardBerita.berita.findFirst);
const featured = featuredState.data;
const paginatedNews = state.findMany.data || [];
const totalPages = state.findMany.totalPages || 1;
// Load data
useEffect(() => {
stateDashboardBerita.berita.findFirst.load(kategori);
}, [kategori]);
useEffect(() => {
state.findMany.load(page, 3, '', kategori);
}, [page, kategori]);
return (
<Box py={20}>
<Container size="xl" px={{ base: 'md', md: 'xl' }}>
{/* === Berita Utama === */}
{featuredState.loading ? (
<Center><Skeleton h={400} /></Center>
) : featured ? (
<Box mb={50}>
<Text fz="h2" fw={700} mb="md">Berita Utama: {kategori}</Text>
<Paper shadow="md" radius="md" withBorder>
<Grid gutter={0}>
<GridCol span={{ base: 12, md: 6 }}>
<Image
src={featured.image?.link}
alt={featured.judul || 'Berita Utama'}
height={400}
fit="cover"
radius="md"
style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
/>
</GridCol>
<GridCol span={{ base: 12, md: 6 }} p="xl">
<Stack h="100%" justify="space-between">
<div>
<Badge color="blue" variant="light" mb="md">
{featured.kategoriBerita?.name || kategori}
</Badge>
<Title order={2} mb="md">{featured.judul}</Title>
<Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsi}</Text>
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">
{new Date(featured.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</Text>
</Group>
<Button
variant="light"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push(`/desa/berita/${featured.id}`)}
>
Baca Selengkapnya
</Button>
</Group>
</Stack>
</GridCol>
</Grid>
</Paper>
</Box>
) : null}
{/* === Daftar Berita === */}
<Box mt={50}>
<Title order={2} mb="md">Berita {kategori}</Title>
<Divider mb="xl" />
{state.findMany.loading ? (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
{Array(3).fill(0).map((_, i) => (
<Skeleton key={i} h={300} radius="md" />
))}
</SimpleGrid>
) : paginatedNews.length === 0 ? (
<Text c="dimmed" ta="center">Belum ada berita di kategori &quot;{kategori}&quot;.</Text>
) : (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
{paginatedNews.map((item) => (
<Card
key={item.id}
shadow="sm"
p="lg"
radius="md"
withBorder
onClick={() => router.push(`/desa/berita/${item.id}`)}
style={{ cursor: 'pointer' }}
>
<Card.Section>
<Image src={item.image?.link} height={200} alt={item.judul} fit="cover" />
</Card.Section>
<Badge color="blue" variant="light" mt="md">
{item.kategoriBerita?.name || kategori}
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
<Group justify="apart" mt="md" gap="xs">
<Text size="xs" color="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',
year: 'numeric',
})}
</Text>
<Badge color="gray" variant="outline">Baca Selengkapnya</Badge>
</Group>
</Card>
))}
</SimpleGrid>
)}
{/* Pagination */}
<Center mt="xl">
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => setPage(newPage)}
siblings={1}
boundaries={1}
withEdges
/>
</Center>
</Box>
</Container>
</Box>
);
}

13
src/app/darmasaba/(pages)/desa/berita/[kategori]/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
// src/app/darmasaba/(pages)/desa/berita/[kategori]/page.tsx
import { Suspense } from "react";
import Content from "./Content";
export default async function Page({ params }: { params: Promise<{ kategori: string }> }) {
const { kategori } = await params;
return (
<Suspense fallback={<div>Loading...</div>}>
<Content kategori={kategori} />
</Suspense>
);
}

162
src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
View File

@@ -1,9 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
import { IconSearch } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import BackButton from '../../layanan/_com/BackButto';
@@ -15,15 +14,66 @@ type HeaderSearchProps = {
children?: React.ReactNode;
};
function LayoutTabsBerita({
children,
function LayoutTabsBerita({
children,
placeholder = "pencarian",
searchIcon = <IconSearch size={20} />,
value,
onChange }: HeaderSearchProps) {
searchIcon = <IconSearch size={20} />
}: HeaderSearchProps) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
// Get active tab from URL path
const activeTab = pathname.split('/').pop() || 'semua';
// Get initial search value from URL
const initialSearch = searchParams.get('search') || '';
const [searchValue, setSearchValue] = useState(initialSearch);
const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
// Update active tab state when pathname changes
const [activeTabState, setActiveTabState] = useState(activeTab);
useEffect(() => {
setActiveTabState(activeTab);
}, [activeTab]);
const router = useRouter()
const pathname = usePathname()
// Clean up timeouts on unmount
useEffect(() => {
return () => {
if (searchTimeout !== null) {
clearTimeout(searchTimeout);
}
};
}, [searchTimeout]);
// Handle search input change with debounce
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setSearchValue(value);
// Clear previous timeout
if (searchTimeout !== null) {
clearTimeout(searchTimeout);
}
// Set new timeout
const newTimeout = window.setTimeout(() => {
const params = new URLSearchParams(searchParams.toString());
if (value) {
params.set('search', value);
} else {
params.delete('search');
}
// Only update URL if the search value has actually changed
if (params.toString() !== searchParams.toString()) {
router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
}
}, 500); // 500ms debounce delay
setSearchTimeout(newTimeout);
};
const tabs = [
{
label: "Semua",
@@ -62,70 +112,68 @@ function LayoutTabsBerita({
},
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (!value) return;
const tab = tabs.find(t => t.value === value);
if (tab) {
router.push(tab.href)
const params = new URLSearchParams(searchParams.toString());
router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
}
setActiveTab(value)
}
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
};
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 color={colors['blue-button']} variant="pills" defaultValue="semua" value={activeTab} onChange={handleTabChange}>
<Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
{/* 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
color={colors['blue-button']}
variant="pills"
value={activeTabState}
onChange={handleTabChange}
>
<Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
<Grid>
<GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
<TabsList>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
{tabs.map((tab, index) => (
<TabsTab
key={index}
value={tab.value}
onClick={() => router.push(tab.href)}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</GridCol>
<GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
<TextInput
radius="lg"
placeholder={placeholder}
leftSection={searchIcon}
w="100%"
value={value}
onChange={onChange}
/>
<TextInput
radius="lg"
placeholder={placeholder}
leftSection={searchIcon}
w="100%"
value={searchValue}
onChange={handleSearchChange}
/>
</GridCol>
</Grid>
</Box>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
</TabsPanel>
))}
{children}
</Tabs>
{children}
</Stack>
);
}

185
src/app/darmasaba/(pages)/desa/berita/budaya/page.tsx
View File

@@ -1,185 +0,0 @@
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/ekonomi/page.tsx
View File

@@ -1,185 +0,0 @@
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;

20
src/app/darmasaba/(pages)/desa/berita/layout.tsx
View File

@@ -1,12 +1,12 @@
import React from 'react';
import LayoutTabsBerita from './_lib/layoutTabs';
// app/desa/berita/BeritaLayoutClient.tsx
'use client'
import dynamic from 'next/dynamic';
function Layout({ children }: { children: React.ReactNode }) {
return (
<LayoutTabsBerita>
{children}
</LayoutTabsBerita>
);
}
const LayoutTabsBerita = dynamic(
() => import('./_lib/layoutTabs'),
{ ssr: false }
);
export default Layout;
export default function BeritaLayoutClient({ children }: { children: React.ReactNode }) {
return <LayoutTabsBerita>{children}</LayoutTabsBerita>;
}

187
src/app/darmasaba/(pages)/desa/berita/pembangunan/page.tsx
View File

@@ -1,187 +0,0 @@
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/pemerintahan/page.tsx
View File

@@ -1,185 +0,0 @@
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;

334
src/app/darmasaba/(pages)/desa/berita/semua/page.tsx
View File

@@ -1,183 +1,177 @@
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';
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
import { Badge, Box, Button, Card, Center, Container, Divider, Flex, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
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() {
const searchParams = useSearchParams();
const router = useTransitionRouter();
// Parameter URL
const search = searchParams.get('search') || '';
const currentPage = parseInt(searchParams.get('page') || '1');
const [page, setPage] = useState(currentPage);
// Gunakan proxy untuk state
const state = useProxy(stateDashboardBerita.berita);
const featured = useProxy(stateDashboardBerita.berita.findFirst); // ✅ Berita utama
const loadingGrid = state.findMany.loading;
const loadingFeatured = featured.loading;
// Load berita utama (hanya sekali)
useEffect(() => {
if (!featured.data && !loadingFeatured) {
stateDashboardBerita.berita.findFirst.load();
}
}, [featured.data, loadingFeatured]);
// Load berita terbaru (untuk grid) saat page/search berubah
useEffect(() => {
const limit = 3; // Sesuaikan dengan tampilan grid
state.findMany.load(page, limit, search);
}, [page, search]);
// Update URL saat page berubah
useEffect(() => {
const url = new URLSearchParams();
if (search) url.set('search', search);
if (page > 1) url.set('page', page.toString());
router.replace(`?${url.toString()}`);
}, [search, page, router]);
const featuredData = featured.data;
const paginatedNews = state.findMany.data || [];
const totalPages = state.findMany.totalPages || 1;
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>
{/* === Berita Utama (Tetap) === */}
{loadingFeatured ? (
<Center><Skeleton h={400} /></Center>
) : featuredData ? (
<Box mb={50}>
<Text fz="h2" fw={700} mb="md">Berita Utama</Text>
<Paper shadow="md" radius="md" withBorder>
<Grid gutter={0}>
<GridCol span={{ base: 12, md: 6 }}>
<Image
src="/api/img/berita-1.png"
alt="Darmasaba Smart Village"
radius="md"
src={featuredData.image?.link || '/images/placeholder.jpg'}
alt={featuredData.judul || 'Berita Utama'}
height={400}
fit="cover"
h={{ base: 450, md: 610 }}
radius="md"
style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
/>
</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>
</GridCol>
<GridCol span={{ base: 12, md: 6 }} p="xl">
<Stack h="100%" justify="space-between">
<div>
<Badge color="blue" variant="light" mb="md">
{featuredData.kategoriBerita?.name || 'Berita'}
</Badge>
<Title order={2} mb="md">{featuredData.judul}</Title>
<Text color="dimmed" lineClamp={3} mb="md">
{featuredData.deskripsi}
</Text>
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">
{new Date(featuredData.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'long',
year: 'numeric'
})}
</Text>
</Group>
<Button
variant="light"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push(`/desa/berita/${featuredData.id}`)}
>
Baca Selengkapnya
</Button>
</Group>
</Stack>
</GridCol>
</Grid>
</Paper>
</GridCol>
</Box>
) : null}
{/* 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 Terbaru (Berubah Saat Pagination) === */}
<Box mt={50}>
<Title order={2} mb="md">Berita Terbaru</Title>
<Divider mb="xl" />
{/* 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} />
{loadingGrid ? (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
{Array(3).fill(0).map((_, i) => (
<Skeleton key={i} h={300} radius="md" />
))}
</SimpleGrid>
) : paginatedNews.length === 0 ? (
<Text c="dimmed" ta="center">Tidak ada berita ditemukan.</Text>
) : (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
{paginatedNews.map((item) => (
<Card
key={item.id}
shadow="sm"
p="lg"
radius="md"
withBorder
>
<Card.Section>
<Image
src={item.image?.link || '/images/placeholder-small.jpg'}
height={200}
alt={item.judul}
fit="cover"
/>
</Card.Section>
<Badge color="blue" variant="light" mt="md">
{item.kategoriBerita?.name || 'Berita'}
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
<Flex align="center" justify="apart" mt="md" gap="xs">
<Text size="xs" color="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',
year: 'numeric'
})}
</Text>
<Button p="xs" variant="light" rightSection={<IconArrowRight size={16} />} onClick={() => router.push(`/desa/berita/${item.id}`)}>Baca Selengkapnya</Button>
</Flex>
</Card>
))}
</SimpleGrid>
)}
{/* Pagination hanya untuk berita terbaru */}
<Center mt="xl">
<Pagination
total={totalPages}
value={page}
onChange={setPage}
siblings={1}
boundaries={1}
withEdges
/>
</Center>
</Box>
</Container>
@@ -185,4 +179,4 @@ function Semua() {
);
}
export default Semua;
export default Semua;

204
src/app/darmasaba/(pages)/desa/berita/sosial/page.tsx
View File

@@ -1,204 +0,0 @@
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 &quot;Galah Melah&quot; & &quot;BARES&quot; 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! ✨
&quot;Kami berharap aksi ini bukan sekadar seremoni, tetapi menjadi budaya masyarakat dalam memilah dan mengelola sampah dari sumbernya.&quot; - Ibu Cokorda Istri Muter Handayani, Plt. Kabid Wilayah Bali, Pusat Pengendalian LH Bali & Nusra.
&quot;Ke depan, kami menargetkan setiap desa di Badung memiliki komunitas Pemuda Peduli Lingkungan agar pengelolaan sampah lebih optimal dan berkelanjutan.&quot; - Bapak Ida Bagus Gede Arjana, Plt. Kadis DLHK Kab. Badung.
&quot;Darmasaba menjadi contoh desa aktif dalam pengelolaan sampah. Kami berharap inovasi ini menginspirasi desa lain.&quot; - 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/teknologi/page.tsx
View File

@@ -1,186 +0,0 @@
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;