feat(kegiatan-desa): add full CRUD frontend + public detail page - bump to 0.1.47
- API: add GET /:id endpoint (findUnique) for KegiatanDesa - Admin CMS: add pages for list-kegiatan-desa and kategori-kegiatan-desa (list, create, detail, edit) - Public: add detail page at /desa/kegiatan-desa/[kategori]/[id] - Refactor: move KegiatanCard to _com to fix Next.js page export constraint - Nav: register kegiatan-desa in navbar and admin page list Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Center,
|
||||
Container,
|
||||
Divider,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { IconCalendar, IconMapPin, IconUsers } from '@tabler/icons-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
const formatTanggal = (val: string) =>
|
||||
val
|
||||
? new Date(val).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })
|
||||
: '-';
|
||||
|
||||
function Page() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = Array.isArray(params.id) ? params.id[0] : params.id;
|
||||
const state = useProxy(stateDashboardKegiatan.kegiatan.findUnique);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) state.load(id);
|
||||
}, [id]);
|
||||
|
||||
if (state.loading) {
|
||||
return (
|
||||
<Box bg={colors.Bg} py={40}>
|
||||
<Container size="lg">
|
||||
<Stack gap="md">
|
||||
<Skeleton h={400} radius="lg" />
|
||||
<Skeleton h={30} w="60%" />
|
||||
<Skeleton h={20} w="40%" />
|
||||
<Skeleton h={200} />
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const data = state.data;
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Center h="60vh" bg={colors.Bg}>
|
||||
<Text fz="xl" c="dimmed">Data kegiatan tidak ditemukan</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box bg={colors.Bg} py={40}>
|
||||
<Container size="lg" px={{ base: 'md', md: 'xl' }}>
|
||||
<Paper shadow="sm" radius="lg" withBorder p={{ base: 'md', md: 'xl' }}>
|
||||
<Stack gap="lg">
|
||||
{data.image?.link && (
|
||||
<Box
|
||||
w="100%"
|
||||
h={{ base: 240, md: 420 }}
|
||||
style={{ overflow: 'hidden', borderRadius: 'var(--mantine-radius-lg)' }}
|
||||
>
|
||||
<Image
|
||||
src={data.image.link}
|
||||
alt={data.judul}
|
||||
fit="cover"
|
||||
w="100%"
|
||||
h="100%"
|
||||
fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Stack gap="xs">
|
||||
<Badge color="blue" variant="light" size="md" radius="md" w="fit-content">
|
||||
{data.kategoriKegiatan?.nama || 'Kegiatan Desa'}
|
||||
</Badge>
|
||||
|
||||
<Title order={2} lh={1.3}>
|
||||
{data.judul}
|
||||
</Title>
|
||||
|
||||
<Group gap="xl" wrap="wrap">
|
||||
<Group gap={6}>
|
||||
<IconCalendar size={16} color="gray" />
|
||||
<Text fz="sm" c="dimmed">{formatTanggal(data.tanggal)}</Text>
|
||||
</Group>
|
||||
<Group gap={6}>
|
||||
<IconMapPin size={16} color="gray" />
|
||||
<Text fz="sm" c="dimmed">{data.lokasi || '-'}</Text>
|
||||
</Group>
|
||||
<Group gap={6}>
|
||||
<IconUsers size={16} color="gray" />
|
||||
<Text fz="sm" c="dimmed">{data.partisipan ?? 0} partisipan</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Divider />
|
||||
|
||||
{data.deskripsiSingkat && (
|
||||
<Text fz={{ base: 'sm', md: 'md' }} c="dimmed" fw={500} fs="italic">
|
||||
{data.deskripsiSingkat}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Text
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
lh={{ base: 1.7, md: 1.9 }}
|
||||
ta="justify"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,100 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Flex,
|
||||
Group,
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowRight, IconCalendar, IconMapPin, IconUsers } from '@tabler/icons-react';
|
||||
|
||||
const formatTanggal = (val: string) =>
|
||||
val
|
||||
? new Date(val).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })
|
||||
: '-';
|
||||
|
||||
export function KegiatanCard({
|
||||
item,
|
||||
onNavigate,
|
||||
}: {
|
||||
item: {
|
||||
id: string;
|
||||
judul: string;
|
||||
deskripsiSingkat: string;
|
||||
tanggal: string;
|
||||
lokasi?: string;
|
||||
partisipan?: number;
|
||||
image?: { link: string } | null;
|
||||
kategoriKegiatan?: { nama: string } | null;
|
||||
};
|
||||
onNavigate: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
shadow="sm"
|
||||
radius="lg"
|
||||
withBorder
|
||||
style={{ cursor: 'pointer', transition: 'box-shadow 0.2s' }}
|
||||
onClick={onNavigate}
|
||||
>
|
||||
<Card.Section>
|
||||
<Image
|
||||
src={item.image?.link || '/images/placeholder-small.jpg'}
|
||||
height={200}
|
||||
alt={item.judul}
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Card.Section>
|
||||
|
||||
<Stack mt="md" gap="xs">
|
||||
<Badge color="blue" variant="light" size="sm" radius="md" w="fit-content">
|
||||
{item.kategoriKegiatan?.nama || 'Kegiatan'}
|
||||
</Badge>
|
||||
|
||||
<Title order={4} lineClamp={2} lh={1.35} fz={{ base: 'sm', md: 'md' }}>
|
||||
{item.judul}
|
||||
</Title>
|
||||
|
||||
<Text c="dimmed" lineClamp={2} fz={{ base: 'xs', md: 'sm' }} lh={1.55}>
|
||||
{item.deskripsiSingkat}
|
||||
</Text>
|
||||
|
||||
<Divider my={4} />
|
||||
|
||||
<Stack gap={4}>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<IconCalendar size={13} color="gray" />
|
||||
<Text fz="xs" c="dimmed">{formatTanggal(item.tanggal)}</Text>
|
||||
</Group>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<IconMapPin size={13} color="gray" />
|
||||
<Text fz="xs" c="dimmed" lineClamp={1}>{item.lokasi || '-'}</Text>
|
||||
</Group>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<IconUsers size={13} color="gray" />
|
||||
<Text fz="xs" c="dimmed">{item.partisipan ?? 0} partisipan</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Flex justify="flex-end" mt="xs">
|
||||
<Button
|
||||
size="compact-sm"
|
||||
variant="light"
|
||||
color={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={14} />}
|
||||
radius="md"
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
128
src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
Normal file
128
src/app/darmasaba/(pages)/desa/kegiatan-desa/_lib/layoutTabs.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
|
||||
import { IconSearch } from '@tabler/icons-react';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function LayoutTabsKegiatanDesa({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const kategoriState = useProxy(stateDashboardKegiatan.kategoriKegiatan);
|
||||
const activeTab = pathname.split('/').pop() || 'semua';
|
||||
const [activeTabState, setActiveTabState] = useState(activeTab);
|
||||
|
||||
useEffect(() => {
|
||||
kategoriState.findMany.load(1, 100);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveTabState(activeTab);
|
||||
}, [activeTab]);
|
||||
|
||||
const initialSearch = searchParams.get('search') || '';
|
||||
const [searchValue, setSearchValue] = useState(initialSearch);
|
||||
const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
|
||||
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.target.value;
|
||||
setSearchValue(value);
|
||||
|
||||
if (searchTimeout !== null) clearTimeout(searchTimeout);
|
||||
|
||||
const newTimeout = window.setTimeout(() => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (value) params.set('search', value);
|
||||
else params.delete('search');
|
||||
|
||||
router.push(
|
||||
`/darmasaba/desa/kegiatan-desa/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`
|
||||
);
|
||||
}, 500);
|
||||
|
||||
setSearchTimeout(newTimeout);
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ label: 'Semua', value: 'semua', href: '/darmasaba/desa/kegiatan-desa/semua' },
|
||||
...(kategoriState.findMany.data || []).map((kat: any) => ({
|
||||
label: kat.nama,
|
||||
value: kat.nama.toLowerCase(),
|
||||
href: `/darmasaba/desa/kegiatan-desa/${kat.nama.toLowerCase()}`,
|
||||
})),
|
||||
];
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
if (!value) return;
|
||||
const tab = tabs.find((t) => t.value === value);
|
||||
if (tab) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
router.push(`${tab.href}${params.toString() ? `?${params.toString()}` : ''}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<Group justify="space-between" align="center" wrap="wrap" gap="md">
|
||||
<Stack gap={4}>
|
||||
<Text fz={{ base: '2rem', md: '3.4rem' }} c={colors['blue-button']} fw="bold" lh={1.2}>
|
||||
Kegiatan Desa Darmasaba
|
||||
</Text>
|
||||
<Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
|
||||
Temukan berbagai kegiatan dan program yang dilaksanakan Desa Darmasaba
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box w={{ base: '100%', sm: 260 }}>
|
||||
<TextInput
|
||||
radius="lg"
|
||||
placeholder="Cari kegiatan..."
|
||||
leftSection={<IconSearch size={18} />}
|
||||
value={searchValue}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTabState}
|
||||
onChange={handleTabChange}
|
||||
>
|
||||
<Box px={{ base: 'md', md: 100 }} py="md" bg={colors['BG-trans']}>
|
||||
<Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
|
||||
<TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsTab
|
||||
key={i}
|
||||
value={tab.value}
|
||||
onClick={() => router.push(tab.href)}
|
||||
style={{ flex: '0 0 auto', minWidth: 100, textAlign: 'center' }}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
))}
|
||||
</TabsList>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{children}
|
||||
</Tabs>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default LayoutTabsKegiatanDesa;
|
||||
35
src/app/darmasaba/(pages)/desa/kegiatan-desa/layout.tsx
Normal file
35
src/app/darmasaba/(pages)/desa/kegiatan-desa/layout.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box } from '@mantine/core';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ReactNode } from 'react';
|
||||
import BackButton from '../layanan/_com/BackButto';
|
||||
|
||||
const LayoutTabsKegiatanDesa = dynamic(
|
||||
() => import('./_lib/layoutTabs'),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function KegiatanDesaLayout({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// /darmasaba/desa/kegiatan-desa/semua → 4 segments → list
|
||||
// /darmasaba/desa/kegiatan-desa/[kategori] → 4 segments → list
|
||||
// /darmasaba/desa/kegiatan-desa/[kategori]/[id]→ 5 segments → detail
|
||||
const segments = pathname.split('/').filter(Boolean);
|
||||
const isDetailPage = segments.length === 5;
|
||||
|
||||
if (isDetailPage) {
|
||||
return (
|
||||
<Box bg={colors.Bg}>
|
||||
<Box pt={33} px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return <LayoutTabsKegiatanDesa>{children}</LayoutTabsKegiatanDesa>;
|
||||
}
|
||||
169
src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx
Normal file
169
src/app/darmasaba/(pages)/desa/kegiatan-desa/semua/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateDashboardKegiatan from '@/app/admin/(dashboard)/_state/desa/kegiatanDesa';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Container,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Image,
|
||||
Pagination,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { KegiatanCard } from '../_com/KegiatanCard';
|
||||
import { IconArrowRight, IconCalendar, IconMapPin, IconUsers } from '@tabler/icons-react';
|
||||
import { useTransitionRouter } from 'next-view-transitions';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
const formatTanggal = (val: string) =>
|
||||
val
|
||||
? new Date(val).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })
|
||||
: '-';
|
||||
|
||||
function Semua() {
|
||||
const router = useTransitionRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const search = searchParams.get('search') || '';
|
||||
const page = parseInt(searchParams.get('page') || '1');
|
||||
|
||||
const state = useProxy(stateDashboardKegiatan.kegiatan);
|
||||
const loading = state.findMany.loading;
|
||||
const items = state.findMany.data || [];
|
||||
const totalPages = state.findMany.totalPages || 1;
|
||||
|
||||
useEffect(() => {
|
||||
state.findMany.load(page, 7, search);
|
||||
}, [page, search]);
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
const url = new URLSearchParams(searchParams.toString());
|
||||
if (search) url.set('search', search);
|
||||
if (newPage > 1) url.set('page', newPage.toString());
|
||||
else url.delete('page');
|
||||
router.replace(`?${url.toString()}`);
|
||||
};
|
||||
|
||||
const featured = items[0] ?? null;
|
||||
const rest = items.slice(1);
|
||||
|
||||
const toDetail = (item: { id: string; kategoriKegiatan?: { nama: string } | null }) =>
|
||||
`/darmasaba/desa/kegiatan-desa/${item.kategoriKegiatan?.nama?.toLowerCase() || 'semua'}/${item.id}`;
|
||||
|
||||
return (
|
||||
<Box py={20}>
|
||||
<Container size="xl" px={{ base: 'md', md: 'xl' }}>
|
||||
|
||||
{/* ─── Hero / Kegiatan Utama ─── */}
|
||||
{loading ? (
|
||||
<Center><Skeleton h={380} radius="md" /></Center>
|
||||
) : featured ? (
|
||||
<Box mb={50}>
|
||||
<Title order={2} mb="md" c="dark">Kegiatan Terbaru</Title>
|
||||
<Paper shadow="md" radius="lg" withBorder style={{ overflow: 'hidden' }}>
|
||||
<Grid gutter={0}>
|
||||
<GridCol span={{ base: 12, md: 6 }}>
|
||||
<Image
|
||||
src={featured.image?.link || '/images/placeholderx.jpg'}
|
||||
alt={featured.judul || 'Kegiatan Utama'}
|
||||
height={380}
|
||||
fit="cover"
|
||||
style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
|
||||
loading="lazy"
|
||||
/>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 6 }} p="xl">
|
||||
<Stack h="100%" justify="space-between" gap="md">
|
||||
<Stack gap="sm">
|
||||
<Badge color={colors['blue-button']} variant="light" size="md" radius="md">
|
||||
{featured.kategoriKegiatan?.nama || 'Kegiatan'}
|
||||
</Badge>
|
||||
<Title order={3} lh={1.3} lineClamp={2}>
|
||||
{featured.judul}
|
||||
</Title>
|
||||
<Text c="dimmed" lineClamp={3} fz={{ base: 'sm', md: 'md' }} lh={1.6}>
|
||||
{featured.deskripsiSingkat}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="xs">
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconCalendar size={16} color={colors['blue-button']} />
|
||||
<Text fz="sm" c="dimmed">{formatTanggal(featured.tanggal)}</Text>
|
||||
</Group>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconMapPin size={16} color={colors['blue-button']} />
|
||||
<Text fz="sm" c="dimmed" lineClamp={1}>{featured.lokasi || '-'}</Text>
|
||||
</Group>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconUsers size={16} color={colors['blue-button']} />
|
||||
<Text fz="sm" c="dimmed">{featured.partisipan ?? 0} partisipan</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
color={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={16} />}
|
||||
radius="md"
|
||||
onClick={() => router.push(toDetail(featured))}
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
{/* ─── Grid Kegiatan ─── */}
|
||||
<Box mt={loading ? 0 : 50}>
|
||||
<Title order={2} mb="md" c="dark">Semua Kegiatan</Title>
|
||||
<Divider mb="xl" />
|
||||
|
||||
{loading ? (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
|
||||
{Array(6).fill(0).map((_, i) => <Skeleton key={i} h={320} radius="md" />)}
|
||||
</SimpleGrid>
|
||||
) : rest.length === 0 && !featured ? (
|
||||
<Text c="dimmed" ta="center" fz="sm" py="xl">Belum ada kegiatan desa.</Text>
|
||||
) : rest.length > 0 ? (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
|
||||
{rest.map((item) => (
|
||||
<KegiatanCard key={item.id} item={item} onNavigate={() => router.push(toDetail(item))} />
|
||||
))}
|
||||
</SimpleGrid>
|
||||
) : null}
|
||||
|
||||
<Center mt="xl">
|
||||
<Pagination
|
||||
total={totalPages}
|
||||
value={page}
|
||||
onChange={handlePageChange}
|
||||
siblings={1}
|
||||
boundaries={1}
|
||||
withEdges
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Semua;
|
||||
Reference in New Issue
Block a user