44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { ActionIcon, Anchor, Breadcrumbs, Card, Group } from "@mantine/core";
|
|
import { IconChevronLeft } from "@tabler/icons-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function BreadCrumbs({ dataLink, back, linkBack }: { dataLink: { title: string, link: string, active: boolean }[], back?: boolean, linkBack?: string }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Card
|
|
radius="md"
|
|
p="sm"
|
|
withBorder
|
|
style={{
|
|
background:
|
|
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
|
borderColor: "rgba(100,100,100,0.2)",
|
|
boxShadow: "0 0 20px rgba(0,255,200,0.08)",
|
|
}}
|
|
>
|
|
<Group>
|
|
{
|
|
back &&
|
|
<ActionIcon variant="outline" aria-label="Settings" radius={"lg"} onClick={() => window.history.back()}>
|
|
<IconChevronLeft size={20} stroke={1.5} />
|
|
</ActionIcon>
|
|
}
|
|
<Breadcrumbs>
|
|
{
|
|
dataLink.map((item, index) => (
|
|
<Anchor
|
|
c={item.active ? "gray.0" : "gray.5"}
|
|
onClick={() => item.active || item.link == "#" ? null : navigate(item.link)}
|
|
key={index}
|
|
>
|
|
{item.title}
|
|
</Anchor>
|
|
))
|
|
}
|
|
</Breadcrumbs>
|
|
</Group>
|
|
|
|
</Card>
|
|
)
|
|
} |