106 lines
2.4 KiB
TypeScript
106 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import HeaderTamplate from "@/app_modules/component/header_tamplate";
|
|
import {
|
|
ActionIcon,
|
|
AppShell,
|
|
Center,
|
|
Flex,
|
|
Footer,
|
|
Grid,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
} from "@mantine/core";
|
|
import {
|
|
IconCash,
|
|
IconChartHistogram,
|
|
IconChartPie,
|
|
IconChartPieFilled,
|
|
IconMoneybag,
|
|
IconNotes,
|
|
IconPencilPlus,
|
|
} from "@tabler/icons-react";
|
|
import { useAtom } from "jotai";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useState } from "react";
|
|
import { gs_investasiFooter } from "../g_state";
|
|
import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
|
|
|
export default function LayoutMainInvestasi({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
const [active, setActive] = useAtom(gs_investasiFooter);
|
|
|
|
const listFooter = [
|
|
{
|
|
id: 1,
|
|
name: "Bursa",
|
|
route: RouterInvestasi.main,
|
|
icon: <IconChartHistogram />,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Portofolio",
|
|
route: RouterInvestasi.main_porto,
|
|
icon: <IconChartPie />,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Saham Saya",
|
|
route: RouterInvestasi.main_investasi,
|
|
icon: <IconCash />,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Transaksi",
|
|
route: RouterInvestasi.main_transaksi,
|
|
icon: <IconNotes />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<AppShell
|
|
header={
|
|
<HeaderTamplate
|
|
route="/dev/crowd/main"
|
|
title="Investasi"
|
|
// icon={<IconPencilPlus />}
|
|
// route2={"/dev/investasi/create"}
|
|
/>
|
|
}
|
|
footer={
|
|
<Footer height={70} bg={"dark.4"}>
|
|
<Grid align="center" h={60} pt={"xs"} grow>
|
|
{/* Tampilan Bursa */}
|
|
{listFooter.map((e, k) => (
|
|
<Grid.Col
|
|
key={e.id}
|
|
span={3}
|
|
onClick={() => {
|
|
router.push(e.route);
|
|
setActive(k)
|
|
}}
|
|
>
|
|
<Center>
|
|
<Flex direction={"column"} align={"center"} w={"100%"}>
|
|
<ActionIcon variant="transparent" c={active === k ? "green" : "white"}>{e.icon}</ActionIcon>
|
|
<Text c={active === k ? "green" : "white"}>{e.name}</Text>
|
|
</Flex>
|
|
</Center>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
</Footer>
|
|
}
|
|
>
|
|
{children}
|
|
</AppShell>
|
|
</>
|
|
);
|
|
}
|