82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
|
|
import {
|
|
AccentColor,
|
|
MainColor,
|
|
} from "@/app_modules/_global/color/color_pallet";
|
|
import { Stack, Tabs } from "@mantine/core";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import Vote_RiwayatSaya from "./saya";
|
|
import Vote_SemuaRiwayat from "./semua";
|
|
|
|
export default function Vote_Riwayat() {
|
|
const router = useRouter();
|
|
const params = useParams<{ id: string }>();
|
|
|
|
const listTabs = [
|
|
{
|
|
id: "1",
|
|
value: "Semua",
|
|
label: "Semua Riwayat",
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "Saya",
|
|
label: "Riwayat Saya",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Tabs
|
|
mt={1}
|
|
variant="pills"
|
|
radius={"xl"}
|
|
value={params.id}
|
|
onTabChange={(val: any) => {
|
|
router.replace(RouterVote.riwayat({ id: val }));
|
|
}}
|
|
styles={{
|
|
tabsList: {
|
|
backgroundColor: MainColor.darkblue,
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 99,
|
|
},
|
|
panel: {
|
|
paddingTop: 10,
|
|
},
|
|
}}
|
|
>
|
|
<Stack>
|
|
<Tabs.List grow>
|
|
{listTabs.map((e, i) => (
|
|
<Tabs.Tab
|
|
key={i}
|
|
value={e.id}
|
|
fw={"bold"}
|
|
c={"black"}
|
|
style={{
|
|
transition: "0.5s",
|
|
backgroundColor:
|
|
params.id === e.id ? MainColor.yellow : "white",
|
|
border:
|
|
params.id === e.id
|
|
? `1px solid ${AccentColor.yellow}`
|
|
: `1px solid white`,
|
|
}}
|
|
>
|
|
{e.label}
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs.List>
|
|
|
|
{params.id === "1" && <Vote_SemuaRiwayat />}
|
|
{params.id === "2" && <Vote_RiwayatSaya />}
|
|
</Stack>
|
|
</Tabs>
|
|
</>
|
|
);
|
|
}
|