upd: list pengumuman

This commit is contained in:
amel
2024-07-18 15:03:07 +08:00
parent 948020b1be
commit 0c9ce19ca3

View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; import { ActionIcon, Box, Center, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
import React from 'react'; import React from 'react';
import { TfiAnnouncement } from "react-icons/tfi"; import { TfiAnnouncement } from "react-icons/tfi";
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -10,42 +10,58 @@ const dataPengumuman = [
{ {
id: 1, id: 1,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Dinas',
tgl: '7 Juli 2024'
}, },
{ {
id: 2, id: 2,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Dinas',
tgl: '7 Juli 2024'
}, },
{ {
id: 3, id: 3,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Adat',
tgl: '7 Juli 2024'
}, },
{ {
id: 4, id: 4,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Dinas',
tgl: '7 Juli 2024'
}, },
{ {
id: 5, id: 5,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'PKK',
tgl: '7 Juli 2024'
}, },
{ {
id: 6, id: 6,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Karang Taruna',
tgl: '7 Juli 2024'
}, },
{ {
id: 7, id: 7,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
grup: 'Dinas',
tgl: '7 Juli 2024'
}, },
{ {
id: 8, id: 8,
name: 'Lembaga Pengkreditan Desa', name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...' desc: 'Diharapkan semua untuk melakukan upacara ben...',
grup: 'Dinas',
tgl: '7 Juli 2024'
}, },
] ]
@@ -68,22 +84,29 @@ export default function ListAnnouncement() {
/> />
{dataPengumuman.map((v, i) => { {dataPengumuman.map((v, i) => {
return ( return (
<Box pt={20} key={i} onClick={() => { <Box key={i} mt={15}>
router.push(`/announcement/${v.id}`) <Box onClick={() => {
}}> router.push(`/announcement/${v.id}`)
<Group align='center' style={{ }}>
borderBottom: `1px solid #D9D9D9`, <Grid>
padding: 10, <Grid.Col span={2}>
}} > <Center>
<Box> <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon"> <TfiAnnouncement color={WARNA.biruTua} size={25} />
<TfiAnnouncement color={WARNA.biruTua} size={25} /> </ActionIcon>
</ActionIcon> </Center>
</Box> </Grid.Col>
<Box> <Grid.Col span={10}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text> <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
</Box> <Text c={WARNA.biruTua} truncate={'end'}>{v.desc}</Text>
</Group> <Group justify='space-between' mt={5}>
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.grup}</Text>
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.tgl}</Text>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider my={15}/>
</Box> </Box>
) )
})} })}