File size: 2,800 Bytes
10c8635 |
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 |
import { Card } from '@/components/ui/card';
import { ExternalLink, Link2 } from 'lucide-react';
import { motion } from 'framer-motion';
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
interface Source {
title: string;
url: string;
snippet: string;
}
interface SourceListProps {
sources: Source[];
}
export function SourceList({ sources }: SourceListProps) {
return (
<div className="space-y-4 animate-in fade-in-50">
<div className="flex items-center gap-2 mb-2">
<Link2 className="h-4 w-4 text-muted-foreground" />
<h2 className="text-base font-semibold text-foreground/90">Sources</h2>
</div>
<ScrollArea className="w-full whitespace-nowrap rounded-md">
<motion.div
className="flex space-x-3 pb-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4, staggerChildren: 0.1 }}
>
{sources.map((source, index) => (
<motion.div
key={index}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.3, delay: index * 0.1 }}
className="shrink-0"
>
<Card
className="w-[280px] group overflow-hidden transition-all hover:shadow-md cursor-pointer bg-card/50 hover:bg-card"
onClick={() => window.open(source.url, '_blank')}
>
<div className="p-4 hover:bg-muted/30">
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<h3 className="font-medium text-sm text-foreground line-clamp-1 mb-1">
{source.title.replace(/\*\*/g, '')}
</h3>
{source.snippet && (
<p className="text-sm text-muted-foreground line-clamp-2 mb-2">
{source.snippet.replace(/\*\*/g, '')}
</p>
)}
<div className="flex items-center gap-2 text-xs text-muted-foreground/70">
<span className="truncate max-w-[200px]">
{new URL(source.url).hostname.replace('www.', '')}
</span>
</div>
</div>
<ExternalLink className="h-4 w-4 flex-shrink-0 text-muted-foreground
opacity-50 group-hover:opacity-100 transition-opacity" />
</div>
</div>
</Card>
</motion.div>
))}
</motion.div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
);
} |