77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
'use client';
|
||
|
||
import { BarChart, CreditCard, Download, FileText } from 'lucide-react';
|
||
|
||
import { Button } from '@/shared/shadcn-ui/button';
|
||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||
|
||
interface CardsListProps {
|
||
totalCards: number;
|
||
}
|
||
|
||
export const CardsList = ({ totalCards }: CardsListProps) => {
|
||
return (
|
||
<div className='mb-10'>
|
||
<div className='mb-4 flex items-center justify-between'>
|
||
<h2 className='text-2xl font-bold'>Топливные карты</h2>
|
||
<div className='flex gap-2'>
|
||
<Button variant='outline' className='gap-2'>
|
||
<Download className='h-4 w-4' />
|
||
Экспорт данных
|
||
</Button>
|
||
<Button variant='outline' className='gap-2'>
|
||
<FileText className='h-4 w-4' />
|
||
Отчеты
|
||
</Button>
|
||
<Button variant='outline' className='gap-2'>
|
||
<BarChart className='h-4 w-4' />
|
||
Аналитика
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
|
||
{Array.from({ length: 4 }).map((_, index) => (
|
||
<Card key={index} className='overflow-hidden'>
|
||
<CardContent className='p-0'>
|
||
<div className='bg-gradient-to-r from-gray-800 to-gray-900 p-4 text-white'>
|
||
<div className='flex items-start justify-between'>
|
||
<div>
|
||
<p className='mb-1 text-xs text-gray-300'>
|
||
Карта #{index + 1}
|
||
</p>
|
||
<p className='font-medium'>**** **** **** {1000 + index}</p>
|
||
</div>
|
||
<CreditCard className='h-6 w-6 text-gray-300' />
|
||
</div>
|
||
</div>
|
||
<div className='p-4'>
|
||
<div className='mb-2 flex items-center justify-between'>
|
||
<p className='text-sm text-gray-500'>Лимит:</p>
|
||
<p className='font-medium'>
|
||
{(5000 * (index + 1)).toLocaleString()} сомони
|
||
</p>
|
||
</div>
|
||
<div className='flex items-center justify-between'>
|
||
<p className='text-sm text-gray-500'>Статус:</p>
|
||
<span className='inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800'>
|
||
Активна
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
{/* Show more cards button */}
|
||
{totalCards > 4 && (
|
||
<Button
|
||
variant='outline'
|
||
className='h-full min-h-[120px] border-dashed'
|
||
>
|
||
Показать все карты ({totalCards})
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|