Components
Loading preview...
Here is modern minimalistic Transaction List component
npx shadcn@latest add https://21st.dev/r/hari/transaction-list// This is a demo of a preview
"use client";
import React from "react";
import Component from "@/components/ui/transaction-list";
import { ArrowRight, CreditCard, X } from "lucide-react";
const dummyTransactions = [
{
id: "1",
name: "Netflix",
type: "Subscription",
amount: -15.99,
date: "July 1, 2024",
time: "10:30 AM",
icon: (
<div className="p-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM6 7C6 6.44772 6.44772 6 7 6H10C10.5523 6 11 6.44772 11 7V17C11 17.5523 10.5523 18 10 18H7C6.44772 18 6 17.5523 6 17V7ZM14 7C14 6.44772 14.4477 6 15 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18H15C14.4477 18 14 17.5523 14 17V7Z"
fill="currentColor"
></path>
</svg>
</div>
),
paymentMethod: "Card",
cardLastFour: "1234",
cardType: "visa",
},
{
id: "2",
name: "Spotify",
type: "Subscription",
amount: -9.99,
date: "July 2, 2024",
time: "09:00 AM",
icon: (
<div className="p-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V14C11 14.5523 10.5523 15 10 15H8C7.44772 15 7 14.5523 7 14V11ZM13 9C13 8.44772 13.4477 8 14 8H16C16.5523 8 17 8.44772 17 9V15C17 15.5523 16.5523 16 16 16H14C13.4477 16 13 15.5523 13 15V9ZM18 7C18 6.44772 18.4477 6 19 6H21C21.5523 6 22 6.44772 22 7V15C22 15.5523 21.5523 16 21 16H19C18.4477 16 18 15.5523 18 15V7Z"
fill="currentColor"
></path>
</svg>
</div>
),
paymentMethod: "Card",
cardLastFour: "5678",
cardType: "mastercard",
},
{
id: "3",
name: "Starbucks",
type: "Coffee",
amount: -5.50,
date: "July 3, 2024",
time: "08:15 AM",
icon: (
<div className="p-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z"
fill="currentColor"
></path>
</svg>
</div>
),
paymentMethod: "Card",
cardLastFour: "9012",
cardType: "visa",
},
];
const DemoOne = () => {
return (
<div className="flex w-full h-screen justify-center items-center dark">
<Component transactions={dummyTransactions} />
</div>
);
};
export default DemoOne;