39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
'use client'
|
|
import { Box, Tabs, rem } from '@mantine/core';
|
|
import { IoCloseCircleOutline } from "react-icons/io5"
|
|
import { IoMdCheckmarkCircleOutline } from "react-icons/io"
|
|
import ListPositionActive from './ui/list_position_active';
|
|
|
|
export default function TabListGroup() {
|
|
const iconStyle = { width: rem(20), height: rem(20) };
|
|
|
|
return (
|
|
<Box p={20}>
|
|
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
|
|
<Tabs.List bg={"white"} style={{
|
|
border: `1px solid ${"#EDEDED"}`,
|
|
padding: 5,
|
|
borderRadius: 100
|
|
}}>
|
|
<Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
|
|
Aktif
|
|
</Tabs.Tab>
|
|
<Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
|
|
Tidak Aktif
|
|
</Tabs.Tab>
|
|
</Tabs.List>
|
|
|
|
<Tabs.Panel value="aktif">
|
|
<ListPositionActive status={true} />
|
|
</Tabs.Panel>
|
|
|
|
<Tabs.Panel value="tidak-aktif">
|
|
<ListPositionActive status={false} />
|
|
{/* <ListPositionNonActive /> */}
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
}
|
|
|