78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import { cn } from "~/utils";
|
|
import { Avatar } from "./ui/avatar";
|
|
import { Button } from "./ui/button";
|
|
import { EditIcon, FingerPrintIcon } from "./icons";
|
|
|
|
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" />
|
|
{!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>
|
|
);
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
const ManagementCardContent = ({
|
|
children,
|
|
className,
|
|
}: React.PropsWithChildren<{ className?: string }>) => {
|
|
return (
|
|
<div className={cn("mt-4 mb-8 text-sm text-primary-2", className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ManagementCardFooter = ({
|
|
children,
|
|
className,
|
|
}: React.PropsWithChildren<{ className?: string }>) => {
|
|
return <div className={className}>{children}</div>;
|
|
};
|
|
|
|
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,
|
|
}; |