File size: 2,444 Bytes
3fa1285 2d64850 3fa1285 2d64850 3fa1285 2d64850 3fa1285 2d64850 3fa1285 f64944d 3fa1285 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ChevronRight, MoreHorizontal } from 'lucide-react';
const datasets = [
{
id: 1,
title: 'Legal knowledge base',
files: '1,242 files',
size: '152 MB',
created: '12.02.2024',
image: 'https://github.com/shadcn.png',
},
{
id: 2,
title: 'HR knowledge base',
files: '1,242 files',
size: '152 MB',
created: '12.02.2024',
image: 'https://github.com/shadcn.png',
},
{
id: 3,
title: 'IT knowledge base',
files: '1,242 files',
size: '152 MB',
created: '12.02.2024',
image: 'https://github.com/shadcn.png',
},
{
id: 4,
title: 'Legal knowledge base',
files: '1,242 files',
size: '152 MB',
created: '12.02.2024',
image: 'https://github.com/shadcn.png',
},
];
export function Datasets() {
return (
<section>
<h2 className="text-2xl font-bold mb-6">Datasets</h2>
<div className="flex gap-6">
{datasets.map((dataset) => (
<Card
key={dataset.id}
className="bg-colors-background-inverse-weak flex-1"
>
<CardContent className="p-4">
<div className="flex justify-between mb-4">
<div
className="w-[70px] h-[70px] rounded-xl bg-cover"
style={{ backgroundImage: `url(${dataset.image})` }}
/>
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-6 w-6" />
</Button>
</div>
<div className="flex justify-between items-end">
<div>
<h3 className="text-lg font-semibold mb-2">
{dataset.title}
</h3>
<p className="text-sm opacity-80">
{dataset.files} | {dataset.size}
</p>
<p className="text-sm opacity-80">
Created {dataset.created}
</p>
</div>
<Button variant="secondary" size="icon">
<ChevronRight className="h-6 w-6" />
</Button>
</div>
</CardContent>
</Card>
))}
<Button className="h-auto " variant={'tertiary'}>
See all
</Button>
</div>
</section>
);
}
|