41f5c95847
Deksirpsi: - tambah table database - folder penyimpanan gambar - link back - link list pada halaman home No Issues
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
'use client'
|
|
import { WARNA } from "@/module/_global"
|
|
import { Box, Divider, Group, Text } from "@mantine/core"
|
|
import { useRouter } from "next/navigation"
|
|
|
|
const dataEvent = [
|
|
{
|
|
id: 1,
|
|
title: 'Pembahasan Mengenai Darmasaba',
|
|
jamAwal: "10.00",
|
|
jamAkhir: "11.00",
|
|
dibuat: "Jhon"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Pembahasan Mengenai Darmasaba',
|
|
jamAwal: "11.00",
|
|
jamAkhir: "12.00",
|
|
dibuat: "Jhon"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Pembahasan Mengenai Darmasaba',
|
|
jamAwal: "13.00",
|
|
jamAkhir: "14.00",
|
|
dibuat: "Jhon"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Pembahasan Mengenai Darmasaba',
|
|
jamAwal: "15.00",
|
|
jamAkhir: "16.00",
|
|
dibuat: "Jhon"
|
|
},
|
|
]
|
|
|
|
export default function ListEventHome() {
|
|
const router = useRouter()
|
|
return (
|
|
<Box pt={10}>
|
|
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Event Hari Ini</Text>
|
|
<Box bg={"white"} style={{
|
|
borderRadius: 10,
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
padding: 10
|
|
}}>
|
|
{dataEvent.map((event, index) => {
|
|
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
|
|
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
|
|
return (
|
|
<Box key={event.id} m={10} onClick={() => router.push(`/calender?page=detail-event`)}>
|
|
<Box bg={bgColor} pl={15} p={10} style={{
|
|
borderRadius: 10
|
|
}} h={113}>
|
|
<Group>
|
|
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
|
|
<Box>
|
|
<Text>{event.jamAwal} - {event.jamAkhir}</Text>
|
|
<Text fw={"bold"} truncate="end">{event.title}</Text>
|
|
<Text>Dibuat oleh : {event.dibuat}</Text>
|
|
</Box>
|
|
</Group>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |