skl/resources/js/components/Dashboard/CerobongCard.tsx

38 lines
1005 B
TypeScript

import React from "react";
import { Building } from "lucide-react";
type CerobongCardProps = {
title: string;
value: number;
fromColor: string;
toColor: string;
};
const CerobongCard: React.FC<CerobongCardProps> = ({
title,
value,
fromColor,
toColor,
}) => {
return (
<div
className={`rounded-xl border bg-card text-card-foreground shadow
bg-gradient-to-r ${fromColor} ${toColor} dark:from-gray-800 dark:to-black`}
>
<div className="flex flex-col items-center justify-center">
<div className="px-5 pt-4">
<div className="text-2xl font-bold">{value}</div>
</div>
<div className="px-5 pb-4 items-center space-y-0">
<div className="tracking-tight text-sm font-medium">
{title}
</div>
</div>
</div>
</div>
);
};
export default CerobongCard;