41f5c95847
Deksirpsi: - tambah table database - folder penyimpanan gambar - link back - link list pada halaman home No Issues
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
'use client'
|
|
import { WARNA } from "@/module/_global";
|
|
import { Box, Group, Text } from "@mantine/core";
|
|
import { GoDiscussionClosed } from "react-icons/go";
|
|
import { CiClock2, CiUser } from "react-icons/ci";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
const dataDiskusi = [
|
|
{
|
|
id: 1,
|
|
judul: 'Mengatasi Limbah Makanan ',
|
|
user: 'Fibra Marcell',
|
|
date: '21 Juni 2024'
|
|
},
|
|
{
|
|
id: 2,
|
|
judul: 'Pentingnya Menjaga Kelestarian Hutan ',
|
|
user: 'Bayu Tegar',
|
|
date: '15 Juni 2024'
|
|
},
|
|
{
|
|
id: 3,
|
|
judul: 'Mengatasi Limbah Industri ',
|
|
user: 'Nian Putri',
|
|
date: '11 Mei 2024'
|
|
},
|
|
{
|
|
id: 4,
|
|
judul: 'Manfaat Sampah Plastik',
|
|
user: 'Budi Prasetyo',
|
|
date: '10 Mei 2024'
|
|
},
|
|
]
|
|
|
|
export default function ListDiscussion() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<Box pt={10}>
|
|
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
|
|
<Box bg={"white"} style={{
|
|
borderRadius: 10,
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
padding: 20
|
|
}}>
|
|
{
|
|
dataDiskusi.map((v, i) => {
|
|
return (
|
|
<Box key={i} style={{
|
|
borderRadius: 10,
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
padding: 10
|
|
}} mb={10} onClick={() => router.push(`/discussion/1`)}>
|
|
<Group>
|
|
<GoDiscussionClosed size={25} />
|
|
<Box w={{ base: 230, md: 400 }}>
|
|
<Text fw={'bold'} truncate="end">{v.judul}</Text>
|
|
</Box>
|
|
</Group>
|
|
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
|
|
<Group gap={5} align="center">
|
|
<CiUser size={18} />
|
|
<Text fz={13}>{v.user}</Text>
|
|
</Group >
|
|
<Group gap={5} align="center">
|
|
<CiClock2 size={18} />
|
|
<Text fz={13}>{v.date}</Text>
|
|
</Group>
|
|
</Group>
|
|
</Box>
|
|
)
|
|
})
|
|
}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |