90 lines
1.4 KiB
TypeScript
90 lines
1.4 KiB
TypeScript
import { Box, Card, Group, Progress, Text } from "@mantine/core";
|
|
|
|
interface ActivityCardProps {
|
|
title: string;
|
|
date: string;
|
|
progress: number;
|
|
status: "Selesai" | "Berjalan" | "Tertunda";
|
|
}
|
|
|
|
export function ActivityCard({
|
|
title,
|
|
date,
|
|
progress,
|
|
status,
|
|
}: ActivityCardProps) {
|
|
const getStatusColor = () => {
|
|
switch (status) {
|
|
case "Selesai":
|
|
return "#22C55E";
|
|
case "Berjalan":
|
|
return "#3B82F6";
|
|
case "Tertunda":
|
|
return "#EF4444";
|
|
default:
|
|
return "#9CA3AF";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
radius="xl"
|
|
p={0}
|
|
withBorder={false}
|
|
style={{
|
|
backgroundColor: "#F3F4F6",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* 🔵 HEADER */}
|
|
<Box
|
|
style={{
|
|
backgroundColor: "#1E3A5F",
|
|
padding: "16px",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Text c="white" fw={700} size="md">
|
|
{title}
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* CONTENT */}
|
|
<Box p="md">
|
|
{/* PROGRESS */}
|
|
<Progress
|
|
value={progress}
|
|
radius="xl"
|
|
size="lg"
|
|
color="orange"
|
|
styles={{
|
|
root: {
|
|
height: 16,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
{/* FOOTER */}
|
|
<Group justify="space-between" mt="md">
|
|
<Text size="sm" fw={500}>
|
|
{date}
|
|
</Text>
|
|
|
|
<Box
|
|
style={{
|
|
backgroundColor: getStatusColor(),
|
|
color: "white",
|
|
padding: "4px 12px",
|
|
borderRadius: 999,
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{status}
|
|
</Box>
|
|
</Group>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|