79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
"use client";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { TrendingUp } from "lucide-react";
|
|
import { TrendingDown } from "lucide-react";
|
|
|
|
interface CardProps {
|
|
title: string | null;
|
|
value: number | string | null;
|
|
delta: number | null;
|
|
filter: string;
|
|
type: string | null;
|
|
}
|
|
|
|
const TopCard: React.FC<CardProps> = ({
|
|
title,
|
|
value,
|
|
delta,
|
|
filter,
|
|
type,
|
|
}) => {
|
|
const isPositiveDelta = delta !== null && delta >= 0;
|
|
// get the user data from the selected user and period
|
|
|
|
const bgColor = type === "top" ? "bg-amber-500" : "bg-violet-500";
|
|
const titleColor = type === "top" ? "text-amber-50" : "text-violet-50";
|
|
const footerColor = type === "top" ? "text-amber-100" : "text-violet-100";
|
|
|
|
const getTimePeriod = (filter: string): string => {
|
|
if (filter === "weeks") return "last week";
|
|
if (filter === "days") return "yesterday";
|
|
if (filter === "months") return "last month";
|
|
return ""; // Default case, can be adjusted based on your needs
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card className={`${bgColor}`}>
|
|
<CardHeader className="pt-4 pb-2 ">
|
|
<CardTitle
|
|
className={`text-base font-medium ${titleColor}`}
|
|
>
|
|
<div className="flex justify-between items-center w-full">
|
|
{title}
|
|
</div>
|
|
</CardTitle>
|
|
{/* <CardDescription className="text-2xl font-bold text-gray-800">
|
|
+ 1.8%
|
|
</CardDescription> */}
|
|
</CardHeader>
|
|
<CardContent className="py-1 text-2xl font-bold text-white">
|
|
<p>{value}</p>
|
|
</CardContent>
|
|
|
|
<CardFooter
|
|
className={`text-sm ${footerColor} flex items-start`}
|
|
>
|
|
{delta !== null &&
|
|
(isPositiveDelta ? (
|
|
<TrendingUp className="h-[20px] text-green-500 mr-1" />
|
|
) : (
|
|
<TrendingDown className="h-[20px] text-rose-500 mr-1" />
|
|
))}
|
|
<p>
|
|
{delta}% from {getTimePeriod(filter)}
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TopCard;
|