191 lines
7.6 KiB
TypeScript
191 lines
7.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
type FilterTab = "All" | "Referrals" | "Deposits";
|
|
|
|
interface ActivityRow {
|
|
user: string;
|
|
friend: string;
|
|
code: string;
|
|
points: string;
|
|
}
|
|
|
|
const mockData: ActivityRow[] = [
|
|
{ user: "0x44...9A21", friend: "0x88...1B2C", code: "REF-001", points: "+120" },
|
|
{ user: "0x44...9A21", friend: "0x88...1B2C", code: "REF-001", points: "+120" },
|
|
{ user: "0x44...9A21", friend: "0x88...1B2C", code: "REF-001", points: "+120" },
|
|
{ user: "0x44...9A21", friend: "0x88...1B2C", code: "REF-001", points: "+120" },
|
|
{ user: "0x44...9A21", friend: "0x88...1B2C", code: "REF-001", points: "+120" },
|
|
];
|
|
|
|
export default function ActivityHistory() {
|
|
const [activeTab, setActiveTab] = useState<FilterTab>("All");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const totalPages = 4;
|
|
|
|
return (
|
|
<div className="w-full bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
|
|
{/* Top Section - Title and Filter Tabs */}
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
|
|
Activity History
|
|
</h3>
|
|
|
|
{/* Filter Tabs */}
|
|
<div className="bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 flex items-center gap-0 h-9">
|
|
<button
|
|
onClick={() => setActiveTab("All")}
|
|
className={`px-4 h-full rounded-lg text-body-small font-bold transition-all min-w-[60px] ${
|
|
activeTab === "All"
|
|
? "bg-white dark:bg-gray-600 text-text-primary dark:text-white shadow-sm"
|
|
: "text-text-tertiary dark:text-gray-400"
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("Referrals")}
|
|
className={`px-4 h-full rounded-lg text-body-small font-bold transition-all min-w-[90px] ${
|
|
activeTab === "Referrals"
|
|
? "bg-white dark:bg-gray-600 text-text-primary dark:text-white shadow-sm"
|
|
: "text-text-tertiary dark:text-gray-400"
|
|
}`}
|
|
>
|
|
Referrals
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("Deposits")}
|
|
className={`px-4 h-full rounded-lg text-body-small font-bold transition-all min-w-[85px] ${
|
|
activeTab === "Deposits"
|
|
? "bg-white dark:bg-gray-600 text-text-primary dark:text-white shadow-sm"
|
|
: "text-text-tertiary dark:text-gray-400"
|
|
}`}
|
|
>
|
|
Deposits
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table Card */}
|
|
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 overflow-hidden">
|
|
{/* Table Header Section */}
|
|
<div className="bg-bg-surface dark:bg-gray-800 border-b border-border-gray dark:border-gray-700 p-6 flex items-center justify-between">
|
|
<div className="flex flex-col gap-1">
|
|
<h4 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
|
|
Activity History
|
|
</h4>
|
|
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
Track all your points-earning activities
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Image src="/icon-refresh.svg" alt="Refresh" width={16} height={16} />
|
|
<span className="text-caption-tiny font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
Last updated: 2 minutes ago
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="overflow-auto">
|
|
{/* Table Header */}
|
|
<div className="bg-bg-subtle dark:bg-gray-700/30 border-b border-border-gray dark:border-gray-700 flex">
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
User
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
Friends
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
Code
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
|
Points
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table Body */}
|
|
{mockData.map((row, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex ${
|
|
index !== mockData.length - 1 ? "border-b border-border-gray dark:border-gray-700" : ""
|
|
}`}
|
|
>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white font-jetbrains">
|
|
{row.user}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white font-jetbrains">
|
|
{row.friend}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white font-jetbrains">
|
|
{row.code}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 px-6 py-4">
|
|
<span className="text-body-small font-bold leading-[150%]" style={{ color: "#10b981" }}>
|
|
{row.points}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-center gap-4">
|
|
{/* Previous Button */}
|
|
<button
|
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
|
disabled={currentPage === 1}
|
|
className="w-10 h-10 flex items-center justify-center disabled:opacity-50"
|
|
>
|
|
<Image src="/icon-chevron-left.svg" alt="Previous" width={10} height={10} />
|
|
</button>
|
|
|
|
{/* Page Numbers */}
|
|
<div className="flex items-center gap-3">
|
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
|
<button
|
|
key={page}
|
|
onClick={() => setCurrentPage(page)}
|
|
className={`px-[10px] py-[3px] rounded-lg text-sm leading-[22px] transition-all ${
|
|
currentPage === page
|
|
? "bg-bg-subtle dark:bg-gray-700 text-text-primary dark:text-white"
|
|
: "text-text-tertiary dark:text-gray-400"
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Next Button */}
|
|
<button
|
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="w-10 h-10 flex items-center justify-center disabled:opacity-50"
|
|
>
|
|
<Image src="/icon-chevron-right.svg" alt="Next" width={10} height={10} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|