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

38 lines
995 B
TypeScript

import React from "react";
import { Building } from "lucide-react";
type DashCardProps = {
title: string;
icon: React.ReactNode;
value: number;
fromColor: string;
toColor: string;
};
const DashCard: React.FC<DashCardProps> = ({
title,
icon,
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="p-5 flex flex-row items-center justify-between space-y-0 pb-2">
<div className="tracking-tight text-sm font-medium">
{title}
</div>
<div className={`rounded-full p-2`}>{icon}</div>
</div>
<div className="p-5 pt-0">
<div className="text-2xl font-bold">{value}</div>
</div>
</div>
);
};
export default DashCard;