Transactions are a great way to implement a transaction list in your application.

Transactions Component

The Transactions component provides a simple and effective way to implement a transaction list in your application.

Preview

Code

import Transactions from '@/components/ui/dedevs-ui/transactions';
 import { CreditCard, ShoppingCart, Wallet } from 'lucide-react';
 
const TRANSACTIONS: ITransaction[] = [
    {
        id: '1',
        title: 'Apple Store Purchase',
        amount: '$999.00',
        type: 'outgoing',
        category: 'shopping',
        icon: ShoppingCart,
        timestamp: 'Today, 2:45 PM',
        status: 'completed',
    },
    {
        id: '2',
        title: 'Salary Deposit',
        amount: '$4,500.00',
        type: 'incoming',
        category: 'transport',
        icon: Wallet,
        timestamp: 'Today, 9:00 AM',
        status: 'completed',
    },
    {
        id: '3',
        title: 'Netflix Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    {
        id: '4',
        title: 'Apple Store Purchase',
        amount: '$999.00',
        type: 'outgoing',
        category: 'shopping',
        icon: ShoppingCart,
        timestamp: 'Today, 2:45 PM',
        status: 'completed',
    },
    {
        id: '5',
        title: 'Supabase Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    {
        id: '6',
        title: 'Vercel Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    ];
const Example = () => {
    return <Transactions transactions={TRANSACTIONS} />;
};
 
export default Example;

Example Usage

Here's an example of how you can use the Transactions component in your application:

import { Transactions } from '@/components/ui/dedevs-ui/transactions';
import { CreditCard, ShoppingCart, Wallet } from 'lucide-react';
 
const TRANSACTIONS: ITransaction[] = [
    {
        id: '1',
        title: 'Apple Store Purchase',
        amount: '$999.00',
        type: 'outgoing',
        category: 'shopping',
        icon: ShoppingCart,
        timestamp: 'Today, 2:45 PM',
        status: 'completed',
    },
    {
        id: '2',
        title: 'Salary Deposit',
        amount: '$4,500.00',
        type: 'incoming',
        category: 'transport',
        icon: Wallet,
        timestamp: 'Today, 9:00 AM',
        status: 'completed',
    },
    {
        id: '3',
        title: 'Netflix Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    {
        id: '4',
        title: 'Apple Store Purchase',
        amount: '$999.00',
        type: 'outgoing',
        category: 'shopping',
        icon: ShoppingCart,
        timestamp: 'Today, 2:45 PM',
        status: 'completed',
    },
    {
        id: '5',
        title: 'Supabase Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    {
        id: '6',
        title: 'Vercel Subscription',
        amount: '$15.99',
        type: 'outgoing',
        category: 'entertainment',
        icon: CreditCard,
        timestamp: 'Yesterday',
        status: 'pending',
    },
    ];
<Transactions transactions={[]} />

Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for custom styling

Customization

The Transactions component can be customized using the following props:

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for custom styling