Fix QC Kak Inno 24 Okt 25
Fix QC Kak Ayu 24 Okt 25 Fix QC Keano 24 Okt 25 Fix Detail Lowongan Kerja
This commit is contained in:
@@ -71,8 +71,11 @@ function Page() {
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
</Group>
|
||||
<Text fz="lg" c={'black'}>
|
||||
Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
|
||||
<Text fz="md" >
|
||||
Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya.
|
||||
</Text>
|
||||
<Text fz="md">
|
||||
Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
// Create a new component: components/EdukasiCard.tsx
|
||||
'use client';
|
||||
|
||||
import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface EdukasiCardProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: EdukasiCardProps) {
|
||||
return (
|
||||
<Paper
|
||||
p={{ base: 'md', md: 'lg' }}
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
withBorder
|
||||
style={{
|
||||
height: '100%',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack h="100%" justify="space-between" gap="md">
|
||||
<Box>
|
||||
<Stack align="center" gap="xs" mb="md">
|
||||
<Box style={{ color }}>{icon}</Box>
|
||||
<Tooltip label={title} maw={250} multiline withArrow position="top">
|
||||
<Text
|
||||
fz={{ base: 'h5', md: 'h4' }}
|
||||
fw={700}
|
||||
c={color}
|
||||
ta="center"
|
||||
lineClamp={2}
|
||||
style={{
|
||||
wordBreak: 'break-word',
|
||||
minHeight: '3.5rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
wordBreak: 'break-word',
|
||||
lineHeight: 1.6,
|
||||
color: 'var(--mantine-color-gray-7)'
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +1,104 @@
|
||||
'use client'
|
||||
import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
'use client';
|
||||
|
||||
import { Box, Container, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconLeaf, IconPlant2, IconRecycle } from '@tabler/icons-react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById)
|
||||
const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById)
|
||||
const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById)
|
||||
import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
|
||||
import colors from '@/con/colors';
|
||||
import { EdukasiCard } from './component/edukasiCard';
|
||||
|
||||
function LoadingSkeleton() {
|
||||
return (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<Skeleton key={item} height={300} radius="md" />
|
||||
))}
|
||||
</SimpleGrid>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EdukasiLingkunganPage() {
|
||||
const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById);
|
||||
const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById);
|
||||
const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById);
|
||||
|
||||
useShallowEffect(() => {
|
||||
tujuan.load('edit')
|
||||
materi.load('edit')
|
||||
contoh.load('edit')
|
||||
}, [])
|
||||
tujuan.load('edit');
|
||||
materi.load('edit');
|
||||
contoh.load('edit');
|
||||
}, []);
|
||||
|
||||
if (tujuan.loading || !tujuan.data || materi.loading || !materi.data || contoh.loading || !contoh.data) {
|
||||
const isLoading = tujuan.loading || !tujuan.data ||
|
||||
materi.loading || !materi.data ||
|
||||
contoh.loading || !contoh.data;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Stack py={20}>
|
||||
<Skeleton radius="md" height={600} />
|
||||
<Stack py="xl" px={{ base: 'md', md: 'xl' }}>
|
||||
<BackButton />
|
||||
<LoadingSkeleton />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
<Stack bg={colors.Bg} py="xl" gap="xl" px={{ base: 'md', md: 'xl' }}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
|
||||
<Box px={{ base: 'md', md: 100 }} pb={20}>
|
||||
<Text ta={'center'} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
|
||||
<Container size="lg" ta="center">
|
||||
<Text
|
||||
component="h1"
|
||||
fz={{ base: 'h2', md: '2.5rem' }}
|
||||
c={colors['blue-button']}
|
||||
fw={700}
|
||||
mb="md"
|
||||
>
|
||||
Edukasi Lingkungan
|
||||
</Text>
|
||||
<Text ta={'center'} fz="h4" c="black">
|
||||
<Text
|
||||
fz={{ base: 'md', md: 'lg' }}
|
||||
c="dimmed"
|
||||
maw={800}
|
||||
mx="auto"
|
||||
>
|
||||
Program edukasi ini membimbing masyarakat untuk peduli dan bertanggung jawab terhadap alam,
|
||||
meningkatkan kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" style={{ alignItems: 'stretch' }}>
|
||||
{/* Tujuan Edukasi Lingkungan */}
|
||||
<Box style={{ display: 'flex', height: '100%' }}>
|
||||
<Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md" style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Tooltip label={<Text fz={"sm"} c={"white"} dangerouslySetInnerHTML={{ __html: tujuan.data?.judul || '' }} /> } position="top" withArrow>
|
||||
<Stack gap={4} align="center">
|
||||
<IconLeaf size={28} color={colors['blue-button']} />
|
||||
<Text dangerouslySetInnerHTML={{ __html: tujuan.data?.judul || '' }} fz="h3" fw="bold" c={colors['blue-button']} ta="center" />
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Text
|
||||
style={{
|
||||
wordBreak: "break-word",
|
||||
whiteSpace: "normal",
|
||||
flexGrow: 1
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: tujuan.data?.deskripsi || '' }}
|
||||
/>
|
||||
<Box style={{ flexGrow: 1 }} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
{/* Materi Edukasi Lingkungan */}
|
||||
<Box style={{ display: 'flex', height: '100%' }}>
|
||||
<Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Tooltip label={materi.data?.judul} position="top" withArrow>
|
||||
<Stack gap={4} align="center">
|
||||
<IconRecycle size={28} color={colors['blue-button']} />
|
||||
<Text fz="h3" fw="bold" c={colors['blue-button']} ta="center" dangerouslySetInnerHTML={{ __html: materi.data?.judul || '' }} />
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Text
|
||||
style={{
|
||||
wordBreak: "break-word",
|
||||
whiteSpace: "normal",
|
||||
flexGrow: 1
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: materi.data?.deskripsi || '' }}
|
||||
/>
|
||||
<Box style={{ flexGrow: 1 }} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
{/* Contoh Edukasi Lingkungan */}
|
||||
<Box style={{ display: 'flex', height: '100%' }}>
|
||||
<Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Tooltip label={contoh.data?.judul} position="top" withArrow>
|
||||
<Stack gap={4} align="center">
|
||||
<IconPlant2 size={28} color={colors['blue-button']} />
|
||||
<Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
|
||||
{contoh.data?.judul}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Text
|
||||
style={{
|
||||
wordBreak: "break-word",
|
||||
whiteSpace: "normal",
|
||||
flexGrow: 1
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: contoh.data?.deskripsi || '' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Container size="xl">
|
||||
<SimpleGrid
|
||||
cols={{ base: 1, sm: 2, lg: 3 }}
|
||||
spacing="xl"
|
||||
verticalSpacing={{ base: 'md', md: 'xl' }}
|
||||
>
|
||||
<EdukasiCard
|
||||
icon={<IconLeaf size={32} />}
|
||||
title={tujuan.data?.judul || ''}
|
||||
description={tujuan.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
|
||||
<EdukasiCard
|
||||
icon={<IconRecycle size={32} />}
|
||||
title={materi.data?.judul || ''}
|
||||
description={materi.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
|
||||
<EdukasiCard
|
||||
icon={<IconPlant2 size={32} />}
|
||||
title={contoh.data?.judul || ''}
|
||||
description={contoh.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
}
|
||||
@@ -1,323 +1,5 @@
|
||||
// 'use client'
|
||||
// import colors from '@/con/colors';
|
||||
// import { Box, Container, Grid, GridCol, 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 BackButton from '../../../desa/layanan/_com/BackButto';
|
||||
|
||||
|
||||
// type HeaderSearchProps = {
|
||||
// placeholder?: string;
|
||||
// searchIcon?: React.ReactNode;
|
||||
// value?: string;
|
||||
// onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
// children?: React.ReactNode;
|
||||
// };
|
||||
|
||||
// function LayoutTabsGotongRoyong({
|
||||
// children,
|
||||
// placeholder = "pencarian",
|
||||
// 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]);
|
||||
|
||||
// // 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/lingkungan/gotong-royong/${activeTab}?${params.toString()}`);
|
||||
// }
|
||||
// }, 500); // 500ms debounce delay
|
||||
|
||||
// setSearchTimeout(newTimeout);
|
||||
// };
|
||||
// const tabs = [
|
||||
// {
|
||||
// label: "Semua",
|
||||
// value: "semua",
|
||||
// href: "/darmasaba/lingkungan/gotong-royong/semua"
|
||||
// },
|
||||
// {
|
||||
// label: "Kebersihan",
|
||||
// value: "kebersihan",
|
||||
// href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
|
||||
// },
|
||||
// {
|
||||
// label: "Infrastruktur",
|
||||
// value: "infrastruktur",
|
||||
// href: "/darmasaba/lingkungan/gotong-royong/infrastruktur"
|
||||
// },
|
||||
// {
|
||||
// label: "Sosial",
|
||||
// value: "sosial",
|
||||
// href: "/darmasaba/lingkungan/gotong-royong/sosial"
|
||||
// },
|
||||
// {
|
||||
// label: "Lingkungan",
|
||||
// value: "lingkungan",
|
||||
// href: "/darmasaba/lingkungan/gotong-royong/lingkungan"
|
||||
// }
|
||||
// ];
|
||||
// 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(`/darmasaba/lingkungan/gotong-royong/${value}${params.toString() ? `?${params.toString()}` : ''}`);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 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">
|
||||
// Gotong Royong Desa Darmasaba
|
||||
// </Text>
|
||||
// <Text ta="center" px="md">
|
||||
// Gotong royong rutin dilakukan oleh warga desa untuk meningkatkan kualitas hidup dan kesejahteraan masyarakat 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((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={searchValue}
|
||||
// onChange={handleSearchChange}
|
||||
// />
|
||||
// </GridCol>
|
||||
// </Grid>
|
||||
// </Box>
|
||||
|
||||
// {children}
|
||||
// </Tabs>
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default LayoutTabsGotongRoyong;
|
||||
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// 'use client'
|
||||
// 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 BackButton from '../../layanan/_com/BackButto';
|
||||
|
||||
// type HeaderSearchProps = {
|
||||
// placeholder?: string;
|
||||
// searchIcon?: React.ReactNode;
|
||||
// value?: string;
|
||||
// onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
// children?: React.ReactNode;
|
||||
// };
|
||||
|
||||
// function LayoutTabsBerita({
|
||||
// children,
|
||||
// placeholder = "pencarian",
|
||||
// searchIcon = <IconSearch size={20} />
|
||||
// }: HeaderSearchProps) {
|
||||
// const router = useRouter();
|
||||
// const pathname = usePathname();
|
||||
// const searchParams = useSearchParams();
|
||||
|
||||
// const activeTab = pathname.split('/').pop() || 'semua';
|
||||
// const initialSearch = searchParams.get('search') || '';
|
||||
// const [searchValue, setSearchValue] = useState(initialSearch);
|
||||
// const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
|
||||
|
||||
// const [activeTabState, setActiveTabState] = useState(activeTab);
|
||||
// useEffect(() => {
|
||||
// setActiveTabState(activeTab);
|
||||
// }, [activeTab]);
|
||||
|
||||
// useEffect(() => {
|
||||
// return () => {
|
||||
// if (searchTimeout !== null) clearTimeout(searchTimeout);
|
||||
// };
|
||||
// }, [searchTimeout]);
|
||||
|
||||
// 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');
|
||||
|
||||
// if (params.toString() !== searchParams.toString()) {
|
||||
// router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
|
||||
// }
|
||||
// }, 500);
|
||||
|
||||
// setSearchTimeout(newTimeout);
|
||||
// };
|
||||
|
||||
// const tabs = [
|
||||
// { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
|
||||
// { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
|
||||
// { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
|
||||
// { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
|
||||
// { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
|
||||
// { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
|
||||
// { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
|
||||
// ];
|
||||
|
||||
// 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(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
||||
// {/* Header */}
|
||||
// <Box px={{ base: "md", md: 100 }}>
|
||||
// <BackButton />
|
||||
// </Box>
|
||||
|
||||
// <Box px={{ base: 'md', md: 100 }}>
|
||||
// <Group justify='space-between' align="center">
|
||||
// <Stack gap="0">
|
||||
// <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
|
||||
// Portal Berita Darmasaba
|
||||
// </Text>
|
||||
// <Text>
|
||||
// Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
|
||||
// </Text>
|
||||
// </Stack>
|
||||
// <Box>
|
||||
// <TextInput
|
||||
// radius="lg"
|
||||
// placeholder={placeholder}
|
||||
// leftSection={searchIcon}
|
||||
// w="100%"
|
||||
// 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']}>
|
||||
// {/* SCROLLABLE TABS */}
|
||||
// <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
|
||||
// <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
|
||||
// {tabs.map((tab, index) => (
|
||||
// <TabsTab
|
||||
// key={index}
|
||||
// value={tab.value}
|
||||
// onClick={() => router.push(tab.href)}
|
||||
// style={{
|
||||
// flex: '0 0 auto', // Prevent shrinking
|
||||
// minWidth: 100, // optional: makes them touch-friendly
|
||||
// textAlign: 'center'
|
||||
// }}
|
||||
// >
|
||||
// {tab.label}
|
||||
// </TabsTab>
|
||||
// ))}
|
||||
// </TabsList>
|
||||
// </Box>
|
||||
// </Box>
|
||||
|
||||
// {children}
|
||||
// </Tabs>
|
||||
// </Stack>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default LayoutTabsBerita;
|
||||
|
||||
|
||||
'use client'
|
||||
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
|
||||
@@ -402,7 +84,7 @@ function LayoutTabsGotongRoyong({ children }: { children: React.ReactNode }) {
|
||||
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold">
|
||||
Portal Gotong royong Darmasaba
|
||||
</Text>
|
||||
<Text>Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
|
||||
<Text fz="md">Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
|
||||
</Stack>
|
||||
<Box>
|
||||
<TextInput
|
||||
|
||||
@@ -66,8 +66,11 @@ function Page() {
|
||||
/>
|
||||
</Group>
|
||||
</Box>
|
||||
<Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
|
||||
Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
|
||||
<Text fz="md" mt="sm">
|
||||
Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau,
|
||||
</Text>
|
||||
<Text fz="md">
|
||||
sehat, dan seimbang bagi seluruh warga desa.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={60}>
|
||||
|
||||
Reference in New Issue
Block a user