Invoice Card

npx shadcn@latest add "https://billui.com/r/invoice-card.json"

import { cva, type VariantProps } from "class-variance-authority";
import { Download, ExternalLink, FileText } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const invoiceCardVariants = cva(
  "relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors hover:bg-accent/50",
  {
    variants: {
      variant: {
        default: "border-border",
        compact: "gap-3 p-3",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

interface InvoiceCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof invoiceCardVariants> {}

const InvoiceCard = React.forwardRef<HTMLDivElement, InvoiceCardProps>(
  ({ className, variant, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(invoiceCardVariants({ variant, className }))}
      {...props}
    />
  ),
);
InvoiceCard.displayName = "InvoiceCard";

// ... rest of component code