portal-dashboard/app/components/management-card.tsx

78 lines
2.0 KiB
TypeScript
Raw Permalink Normal View History

2024-03-14 01:52:31 +00:00
import { cn } from "~/utils";
import { Avatar } from "./ui/avatar";
import { Button } from "./ui/button";
import { EditIcon, FingerPrintIcon } from "./icons";
2024-03-14 01:52:31 +00:00
2024-03-19 18:13:37 +00:00
const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
return (
<div className="flex justify-center">
<div className="relative w-fit h-fit">
<Avatar className="border-2 border-ring h-28 w-28" />
2024-03-19 18:13:37 +00:00
{!button
? <Button
onClick={onClick}
variant="outline"
className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
<EditIcon />
</Button>
: button
}
</div>
</div>
);
};
2024-03-14 01:52:31 +00:00
const ManagementCardTitle = ({
children,
className,
}: React.PropsWithChildren<{ className?: string }>) => {
return (
<div className={cn("flex items-center gap-x-2 font-semibold", className)}>
<FingerPrintIcon className="text-ring" />
{children}
</div>
);
};
2024-03-14 01:52:31 +00:00
const ManagementCardContent = ({
children,
className,
}: React.PropsWithChildren<{ className?: string }>) => {
return (
<div className={cn("mt-4 mb-8 text-sm text-primary-2", className)}>
{children}
</div>
);
2024-03-14 01:52:31 +00:00
};
const ManagementCardFooter = ({
children,
className,
}: React.PropsWithChildren<{ className?: string }>) => {
return <div className={className}>{children}</div>;
2024-03-14 01:52:31 +00:00
};
const ManagementCard = ({
children,
variant,
}: React.PropsWithChildren<{ variant?: string }>) => {
return (
<div
className={cn(
"rounded-lg p-8 border w-full border-[--variant-color]",
!variant && "[--variant-color:theme(colors.border)]",
variant === "accent" && "[--variant-color:theme(colors.primary-1.DEFAULT)]",
)}>
{children}
</div>
);
};
export {
ManagementCard,
ManagementCardAvatar,
ManagementCardContent,
ManagementCardFooter,
ManagementCardTitle,
};