116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
'use client'
|
|
import { WARNA } from '@/module/_global';
|
|
import { ActionIcon, Box, Center, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
|
|
import React from 'react';
|
|
import { TfiAnnouncement } from "react-icons/tfi";
|
|
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const dataPengumuman = [
|
|
{
|
|
id: 1,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Dinas',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Dinas',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Adat',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Dinas',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'PKK',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Karang Taruna',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
|
|
grup: 'Dinas',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'Lembaga Pengkreditan Desa',
|
|
desc: 'Diharapkan semua untuk melakukan upacara ben...',
|
|
grup: 'Dinas',
|
|
tgl: '7 Juli 2024'
|
|
},
|
|
]
|
|
|
|
export default function ListAnnouncement() {
|
|
const router = useRouter()
|
|
return (
|
|
<Box p={20}>
|
|
<TextInput
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
size="md"
|
|
radius={30}
|
|
leftSection={<HiMagnifyingGlass size={20} />}
|
|
placeholder="Pencarian"
|
|
/>
|
|
{dataPengumuman.map((v, i) => {
|
|
return (
|
|
<Box key={i} mt={15}>
|
|
<Box onClick={() => {
|
|
router.push(`/announcement/${v.id}`)
|
|
}}>
|
|
<Grid>
|
|
<Grid.Col span={2}>
|
|
<Center>
|
|
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
|
|
<TfiAnnouncement color={WARNA.biruTua} size={25} />
|
|
</ActionIcon>
|
|
</Center>
|
|
</Grid.Col>
|
|
<Grid.Col span={10}>
|
|
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
|
|
<Text c={WARNA.biruTua} truncate={'end'}>{v.desc}</Text>
|
|
<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>
|
|
);
|
|
}
|