website refactor
This commit is contained in:
155
apps/website/templates/LeagueWalletTemplate.tsx
Normal file
155
apps/website/templates/LeagueWalletTemplate.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Section } from '@/ui/Section';
|
||||
import { Wallet, TrendingUp, TrendingDown, DollarSign, Calendar, ArrowUpRight, ArrowDownRight } from 'lucide-react';
|
||||
|
||||
interface LeagueWalletTemplateProps {
|
||||
viewData: LeagueWalletViewData;
|
||||
}
|
||||
|
||||
export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: viewData.currency,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
const getTransactionIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'deposit':
|
||||
return <ArrowUpRight className="w-4 h-4 text-performance-green" />;
|
||||
case 'withdrawal':
|
||||
return <ArrowDownRight className="w-4 h-4 text-red-400" />;
|
||||
case 'sponsorship':
|
||||
return <DollarSign className="w-4 h-4 text-primary-blue" />;
|
||||
case 'prize':
|
||||
return <TrendingUp className="w-4 h-4 text-warning-amber" />;
|
||||
default:
|
||||
return <DollarSign className="w-4 h-4 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getTransactionColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'deposit':
|
||||
return 'text-performance-green';
|
||||
case 'withdrawal':
|
||||
return 'text-red-400';
|
||||
case 'sponsorship':
|
||||
return 'text-primary-blue';
|
||||
case 'prize':
|
||||
return 'text-warning-amber';
|
||||
default:
|
||||
return 'text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">League Wallet</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Financial overview and transaction history
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Balance Card */}
|
||||
<Card>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
|
||||
<Wallet className="w-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Current Balance</p>
|
||||
<p className="text-3xl font-bold text-white">
|
||||
{formatCurrency(viewData.balance)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Transaction History */}
|
||||
<Card>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
|
||||
<Calendar className="w-5 h-5 text-performance-green" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Transaction History</h3>
|
||||
<p className="text-sm text-gray-400">Recent financial activity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{viewData.transactions.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Wallet className="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p className="text-gray-400">No transactions yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{viewData.transactions.map((transaction) => (
|
||||
<div
|
||||
key={transaction.id}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-charcoal-outline bg-iron-gray/30"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
{getTransactionIcon(transaction.type)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-white truncate">
|
||||
{transaction.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<span>{new Date(transaction.createdAt).toLocaleDateString()}</span>
|
||||
<span>•</span>
|
||||
<span className={`capitalize ${getTransactionColor(transaction.type)}`}>
|
||||
{transaction.type}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className={`capitalize ${
|
||||
transaction.status === 'completed'
|
||||
? 'text-performance-green'
|
||||
: transaction.status === 'pending'
|
||||
? 'text-warning-amber'
|
||||
: 'text-red-400'
|
||||
}`}>
|
||||
{transaction.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<p className={`text-lg font-semibold ${
|
||||
transaction.amount >= 0 ? 'text-performance-green' : 'text-red-400'
|
||||
}`}>
|
||||
{transaction.amount >= 0 ? '+' : '-'}{formatCurrency(transaction.amount)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Note about features */}
|
||||
<Card>
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
|
||||
<Wallet className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">Wallet Management</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
Interactive withdrawal and export features will be implemented in future updates.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user