Trend Badge

1import { TrendingDownIcon, TrendingUpIcon } from "lucide-react";
2import type React from "react";
3import { Badge } from "@/components/ui/badge";
4import { cn } from "@/lib/utils";
5 
6interface TrendBadgeProps extends React.ComponentProps<typeof Badge> {
7  trend?: "up" | "down";
8}
9 
10const TrendBadge = ({
11  trend = "up",
12  children,
13  className,
14  ...props
15}: TrendBadgeProps) => {
16  const isUp = trend === "up";
17  const Icon = isUp ? TrendingUpIcon : TrendingDownIcon;
18 
19  return (
20    <Badge
21      className={cn(
22        isUp
23          ? "bg-emerald-500/15 text-emerald-500 border-emerald-500/25"
24          : "bg-red-400/15 text-red-400 border-red-400/25",
25        className,
26      )}
27      {...props}
28    >
29      <Icon className="size-3" />
30      {children && <span className="text-xs">{children}</span>}
31    </Badge>
32  );
33};
34 
35export type { TrendBadgeProps };
36export { TrendBadge };