106 lines
2.2 KiB
TypeScript
106 lines
2.2 KiB
TypeScript
import {
|
|
Box,
|
|
Card,
|
|
Group,
|
|
Loader,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
useMantineColorScheme,
|
|
} from "@mantine/core";
|
|
import dayjs from "dayjs";
|
|
import { Calendar } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { apiClient } from "@/utils/api-client";
|
|
|
|
interface EventData {
|
|
date: string;
|
|
title: string;
|
|
}
|
|
|
|
export function ActivityList() {
|
|
const { colorScheme } = useMantineColorScheme();
|
|
const dark = colorScheme === "dark";
|
|
|
|
const [data, setData] = useState<EventData[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function fetchEvents() {
|
|
try {
|
|
const res = await apiClient.GET("/api/event/");
|
|
if (res.data?.data) {
|
|
setData(
|
|
(res.data.data as { startDate: string; title: string }[]).map(
|
|
(e) => ({
|
|
date: dayjs(e.startDate).format("D MMMM YYYY"),
|
|
title: e.title,
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch events", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchEvents();
|
|
}, []);
|
|
|
|
return (
|
|
<Card
|
|
p="md"
|
|
radius="xl"
|
|
withBorder
|
|
bg={dark ? "#1E293B" : "white"}
|
|
style={{
|
|
borderColor: dark ? "#334155" : "white",
|
|
boxShadow: dark
|
|
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
|
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
|
}}
|
|
h="100%"
|
|
>
|
|
<Group gap="xs" mb="lg">
|
|
<Calendar
|
|
style={{ width: 20, height: 20 }}
|
|
color={dark ? "#E2E8F0" : "#1E3A5F"}
|
|
/>
|
|
<Title order={4} c={dark ? "white" : "gray.9"}>
|
|
Kalender & Kegiatan Mendatang
|
|
</Title>
|
|
</Group>
|
|
<Stack gap="md">
|
|
{loading ? (
|
|
<Group justify="center" py="xl">
|
|
<Loader />
|
|
</Group>
|
|
) : data.length > 0 ? (
|
|
data.map((event) => (
|
|
<Box
|
|
key={`${event.title}-${event.date}`}
|
|
style={{
|
|
borderLeft: "4px solid var(--mantine-color-blue-filled)",
|
|
paddingLeft: 12,
|
|
}}
|
|
>
|
|
<Text size="sm" c="dimmed">
|
|
{event.date}
|
|
</Text>
|
|
<Text fw={500} c={dark ? "white" : "gray.9"}>
|
|
{event.title}
|
|
</Text>
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Text size="sm" c="dimmed" ta="center">
|
|
Tidak ada kegiatan mendatang
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|