"use client";

import { Building2, CircleDollarSign } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export function Transactions1() {
  return (
    <Card className="w-full max-w-sm min-w-72 gap-4 p-4">
      {/* Header with Select */}
      <div className="flex items-center justify-between gap-2.5">
        <div className="flex items-center gap-1.5">
          <CircleDollarSign className="size-6 text-muted-foreground" />
          <h3 className="text-sm font-medium text-foreground">Transactions</h3>
        </div>

        <Select defaultValue="last-month">
          <SelectTrigger size="sm" className="text-xs font-medium">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="last-day">Last 24 hours</SelectItem>
            <SelectItem value="last-week">Last 7 days</SelectItem>
            <SelectItem value="last-month">Last month</SelectItem>
            <SelectItem value="last-year">Last year</SelectItem>
            <SelectItem value="year-to-date">Year to date</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      <Tabs defaultValue="completed">
        <TabsList>
          <TabsTrigger value="completed">Completed</TabsTrigger>
          <TabsTrigger value="pending">Pending</TabsTrigger>
          <TabsTrigger value="cancelled">Cancelled</TabsTrigger>
        </TabsList>
      </Tabs>

      {/* Transactions List */}
      <div className="flex w-full flex-col gap-5 pt-1">
        <TransactionItem
          icon={<Building2 />}
          title="Tax Refund"
          description="2024 Income Tax Refund"
          amount={542}
          date="Dec 20"
        />

        <TransactionItem
          icon={<Building2 />}
          title="Freelance Payment"
          description="Payment for Invoice #INV-4421 - Website redesign project"
          amount={800}
          date="Dec 14"
        />

        <TransactionItem
          icon={<Building2 />}
          title="Salary Payment"
          description="Monthly salary - Acme Corporation SRL, Payroll November 2025"
          amount={2500}
          date="Dec 01"
        />
      </div>

      <Button variant="secondary" className="w-full">
        View all
      </Button>
    </Card>
  );
}

function TransactionItem({
  icon,
  title,
  description,
  amount,
  date,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
  amount: number;
  date: string;
}) {
  const isPositive = amount >= 0;
  const formattedAmount = `${isPositive ? "+" : "-"}$${Math.abs(amount).toFixed(2)}`;

  return (
    <div className="flex gap-2.5">
      {/* Transaction Icon */}
      <div className="flex size-11 shrink-0 items-center justify-center rounded-full border bg-muted [&>svg]:size-4 [&>svg]:text-primary">
        {icon}
      </div>

      {/* Transaction Info */}
      <div className="flex flex-1 flex-col gap-1">
        <h3 className="text-sm font-medium text-foreground">{title}</h3>
        <p className="line-clamp-2 text-xs text-muted-foreground">{description}</p>
      </div>

      {/* Transaction Details */}
      <div className="flex flex-col items-end gap-1">
        <span
          className={cn(
            "text-sm font-medium tabular-nums",
            isPositive ? "text-success" : "text-destructive"
          )}
        >
          {formattedAmount}
        </span>
        <span className="text-xs text-muted-foreground">{date}</span>
      </div>
    </div>
  );
}
Transactions

Transactions 1

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft
