39 lines
905 B
TypeScript
39 lines
905 B
TypeScript
import { Divider, NavLink, Text } from "@mantine/core";
|
|
import { CaretRightIcon, Icon } from "@phosphor-icons/react";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import styles from "./list-row.module.css";
|
|
|
|
interface ListLinkProps {
|
|
label: string;
|
|
to: string;
|
|
Icon?: Icon;
|
|
disabled?: boolean
|
|
}
|
|
|
|
const ListLink = ({ label, to, Icon, disabled=false }: ListLinkProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
<NavLink
|
|
className={styles.listRow}
|
|
disabled={disabled}
|
|
w="100%"
|
|
p="md"
|
|
component={"button"}
|
|
onClick={() => navigate({ to })}
|
|
label={
|
|
<Text fw={500} size="md">
|
|
{label}
|
|
</Text>
|
|
}
|
|
leftSection={Icon && <Icon weight="bold" size={20} />}
|
|
rightSection={<CaretRightIcon size={20} />}
|
|
/>
|
|
<Divider />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ListLink;
|