39 lines
910 B
TypeScript
39 lines
910 B
TypeScript
import { Divider, Group, Loader, Text, UnstyledButton } from "@mantine/core";
|
|
import { CaretRightIcon, Icon } from "@phosphor-icons/react";
|
|
|
|
interface ListButtonProps {
|
|
label: string;
|
|
Icon: Icon;
|
|
onClick: () => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const ListButton = ({ label, onClick, Icon, loading }: ListButtonProps) => {
|
|
return (
|
|
<>
|
|
<UnstyledButton
|
|
w="100%"
|
|
p="md"
|
|
component={"button"}
|
|
onClick={onClick}
|
|
disabled={loading}
|
|
>
|
|
<Group>
|
|
<Icon weight="bold" size={20} />
|
|
<Text fw={500} size="md">
|
|
{label}
|
|
</Text>
|
|
{loading ? (
|
|
<Loader size="sm" style={{ marginLeft: "auto" }} />
|
|
) : (
|
|
<CaretRightIcon style={{ marginLeft: "auto" }} size={20} />
|
|
)}
|
|
</Group>
|
|
</UnstyledButton>
|
|
<Divider />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ListButton;
|