"use client" import { useState } from "react" import { ArrowLeftRight } from 'lucide-react' import { motion } from "framer-motion" /** * TransactionHistory Component * * A component that displays a list of cryptocurrency transactions * with filtering options and a clean, minimal interface. */ export function TransactionHistory() { // State for active filter const [activeFilter, setActiveFilter] = useState("All") // Filter options const filterOptions = ["All", "Today", "Last Week", "Last Month", "Last Year"] // Sample transaction data const transactions = [ { id: "tx1", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "5 mins ago", }, { id: "tx2", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "10 mins ago", }, { id: "tx3", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "1 hour ago", }, { id: "tx4", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "5 hours ago", }, { id: "tx5", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "1 day ago", }, { id: "tx6", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "5 days ago", }, { id: "tx7", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "10 days ago", }, { id: "tx8", hash: "0x8653e4e3232....g2646536o", date: "23rd Jan, 2025", timeAgo: "1 month ago", }, ] // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.05 } } } const itemVariants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.3 } } } const buttonVariants = { initial: { scale: 1 }, hover: { scale: 1.03, transition: { duration: 0.2 } }, tap: { scale: 0.97, transition: { duration: 0.1 } }, } return (

Transaction History

{/* Filter tabs */}

{filterOptions.map((filter) => ( setActiveFilter(filter)} variants={buttonVariants} initial="initial" whileHover="hover" whileTap="tap" > {filter} ))}

{/* Transactions list */} {transactions.map((tx) => (

{tx.hash}

{tx.date}

{tx.timeAgo}

))}

) }