draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

info-card-with-trend.tsx (1323B)

      1 import { TrendingDown, TrendingUp } from "lucide-react";
      2 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
      3 
      4 interface InfoCardWithTrendProps {
      5     title: string;
      6     changePercent: number;
      7     value: string | number;
      8     trendColorOverride?: string;
      9 }
     10 
     11 export default function InfoCardWithTrend({ title, changePercent, value, trendColorOverride }: InfoCardWithTrendProps) {
     12     const trendColor = changePercent > 0 ? "text-green-400" : "text-red-400"
     13     const trendIcon = changePercent > 0 ? <TrendingUp className="h-3.5 w-3.5 mr-1" /> : <TrendingDown className="h-3.5 w-3.5 mr-1" />
     14     const trendText = changePercent > 0 ? `+${changePercent}% from previous period` : `${changePercent}% from previous period`
     15     const trendClass = trendColorOverride || trendColor
     16 
     17     return (
     18         <Card className="border-gray-800 bg-gray-950">
     19             <CardHeader className="pb-2">
     20                 <CardTitle className="text-sm font-medium">{title}</CardTitle>
     21             </CardHeader>
     22             <CardContent>
     23                 <div className="text-2xl font-bold">{value}</div>
     24                 <div className={`flex items-center text-xs ${trendClass}`}>
     25                     {trendIcon}
     26                     <span>{trendText}</span>
     27                 </div>
     28             </CardContent>
     29         </Card>
     30     )
     31 }