62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
|
|
import {
|
|
Avatar,
|
|
Card,
|
|
Center,
|
|
Grid,
|
|
Stack,
|
|
Text,
|
|
Title
|
|
} from "@mantine/core";
|
|
import { MODEL_VOTING_DAFTAR_NAMA_VOTE } from "../../model/interface";
|
|
|
|
export default function ComponentVote_HasilVoting({
|
|
data,
|
|
}: {
|
|
data?: MODEL_VOTING_DAFTAR_NAMA_VOTE[];
|
|
}) {
|
|
return (
|
|
<>
|
|
<Card
|
|
p={30}
|
|
style={{
|
|
backgroundColor: AccentColor.darkblue,
|
|
borderRadius: "10px",
|
|
border: `2px solid ${AccentColor.blue}`,
|
|
color: MainColor.white,
|
|
}}
|
|
>
|
|
<Card.Section>
|
|
<Stack>
|
|
<Center>
|
|
<Title order={5}>Hasil Voting</Title>
|
|
</Center>
|
|
|
|
<Grid justify="center">
|
|
{data?.map((e) => (
|
|
<Grid.Col key={e.id} span={data?.length >= 4 ? 6 : 4}>
|
|
<Stack align="center">
|
|
<Avatar
|
|
radius={100}
|
|
size={70}
|
|
variant="outline"
|
|
color="yellow"
|
|
>
|
|
<Text>{e.jumlah}</Text>
|
|
</Avatar>
|
|
<Text fz={"xs"} align="center">
|
|
{e.value}
|
|
</Text>
|
|
</Stack>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
</Stack>
|
|
</Card.Section>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|