65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
|
|
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export default function ComponentGlobal_HeaderTamplate({
|
|
route,
|
|
route2,
|
|
title,
|
|
icon,
|
|
}: {
|
|
route?: any;
|
|
route2?: any;
|
|
title: string;
|
|
icon?: any;
|
|
}) {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isRightLoading, setRightLoading] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Header height={50} sx={{ borderStyle: "none" }}>
|
|
<Group h={50} position="apart" px={"md"}>
|
|
<ActionIcon
|
|
loading={isLoading ? true : false}
|
|
variant="transparent"
|
|
onClick={() => {
|
|
setIsLoading(true);
|
|
if (route === null || route === undefined) {
|
|
return router.back();
|
|
} else {
|
|
return router.push(route);
|
|
}
|
|
}}
|
|
>
|
|
<IconChevronLeft />
|
|
</ActionIcon>
|
|
<Title order={5}>{title}</Title>
|
|
{(() => {
|
|
if (route2 === null || route2 === undefined) {
|
|
return <ActionIcon disabled variant="transparent"></ActionIcon>;
|
|
} else {
|
|
return (
|
|
<ActionIcon
|
|
loading={isRightLoading ? true : false}
|
|
variant="transparent"
|
|
onClick={() => {
|
|
setRightLoading(true);
|
|
router.push(route2);
|
|
}}
|
|
>
|
|
{icon}
|
|
</ActionIcon>
|
|
);
|
|
}
|
|
})()}
|
|
</Group>
|
|
</Header>
|
|
</>
|
|
);
|
|
}
|