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

Sinkronisasi UI & API Admin - User Submenu Info Sekolah

Browse Source
This commit is contained in:
nico
2025-08-29 15:20:46 +08:00
parent b6d6583e77
commit 9f9a0fb451
59 changed files with 1848 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/page.tsx
View File

@@ -1,35 +1,34 @@
'use client'
import colors from '@/con/colors';
import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import { IconSearch, IconUser } from '@tabler/icons-react';
import { motion } from 'framer-motion';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
const dataSekolah = [
{
id: 1,
gambar: '/api/img/buku-1.png',
judul: 'Angkasa dan 56 Hari',
deskripsi: 'Angkasa dan 56 hari mengisahkan tentang sebuah perjuangan perihal asa yang belum usai. Tentang cinta pertama yang secara tiba-tiba menghilang dari kehidupan.'
},
{
id: 2,
gambar: '/api/img/buku-2.png',
judul: 'Sayuran Organik',
deskripsi: 'Buku ini membahas cara menanam sayuran secara organik, jenis-jenis sayuran organik, dan cara mengatasi hama dan penyakit. '
},
{
id: 3,
gambar: '/api/img/buku-3.png',
judul: 'Bali Tempo Dulu',
deskripsi: 'Buku Bali Tempo Doeloe oleh Adrian Vickers berisi berbagai catatan perjalanan yang menggambarkan kehidupan sosial budaya Bali di masa lampau.'
},
]
import { useProxy } from 'valtio/utils';
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
function Page() {
const state = useProxy(perpustakaanDigitalState)
const [expandedId, setExpandedId] = useState<string | null>(null);
useShallowEffect(() => {
state.dataPerpustakaan.findMany.load()
}, [])
if (!state.dataPerpustakaan.findMany.load)
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 }} pb={50}>
<Skeleton h={60} radius="xl" />
<Skeleton h={200} mt="lg" radius="md" />
</Box>
</Stack>
)
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
@@ -80,22 +79,54 @@ function Page() {
base: 1,
md: 3
}}
style={{
alignItems: 'stretch'
}}
>
{dataSekolah.map((v, k) => {
{state.dataPerpustakaan.findMany.data.map((v, k) => {
return (
<Box key={k}>
<Box key={k} style={{ height: '100%' }}>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.8 }}
style={{ width: '100%', height: '100%' }}
>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack>
<Paper
p={"xl"}
bg={colors['white-trans-1']}
w={{ base: "100%", md: "100%" }}
style={{
height: '100%',
display: 'flex',
flexDirection: 'column'
}}
>
<Stack style={{ flex: 1 }}>
<Center>
<Image src={v.gambar} alt='' w={{ base: 390, md: 1000 }}/>
<Image src={v.image.link} alt='' w={{ base: 390, md: 1000 }} />
</Center>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.judul}</Text>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.deskripsi}</Text>
<Spoiler
showLabel={
<Text fw="bold" fz="sm" c={colors['blue-button']}>
Show more
</Text>
}
hideLabel={
<Text fw="bold" fz="sm" c={colors['blue-button']}>
Hide details
</Text>
}
expanded={expandedId === v.id}
onExpandedChange={(isExpanded) =>
setExpandedId(isExpanded ? v.id : null)
}
>
<Text
ta="justify"
fz="sm"
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
/>
</Spoiler>
</Stack>
</Paper>
</motion.div>