afkarxyz
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { X } from "lucide-react";
|
|
|
|
export interface HistoryItem {
|
|
id: string;
|
|
url: string;
|
|
type: "track" | "album" | "playlist" | "artist";
|
|
name: string;
|
|
artist: string;
|
|
image: string;
|
|
timestamp: number;
|
|
}
|
|
|
|
interface FetchHistoryProps {
|
|
history: HistoryItem[];
|
|
onSelect: (item: HistoryItem) => void;
|
|
onRemove: (id: string) => void;
|
|
}
|
|
|
|
export function FetchHistory({ history, onSelect, onRemove }: FetchHistoryProps) {
|
|
if (history.length === 0) return null;
|
|
|
|
const getTypeLabel = (type: string) => {
|
|
switch (type) {
|
|
case "track":
|
|
return "Track";
|
|
case "album":
|
|
return "Album";
|
|
case "playlist":
|
|
return "Playlist";
|
|
case "artist":
|
|
return "Artist";
|
|
default:
|
|
return type;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<span className="text-sm text-muted-foreground">Recent Fetches</span>
|
|
<div className="flex gap-2 overflow-x-auto pb-2 pt-2">
|
|
{history.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="relative shrink-0 w-[130px] group cursor-pointer rounded-lg border bg-card hover:bg-accent transition-colors overflow-visible"
|
|
onClick={() => onSelect(item)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute -top-1.5 -right-1.5 z-10 w-5 h-5 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onRemove(item.id);
|
|
}}
|
|
>
|
|
<X className="h-3 w-3 text-red-900" strokeWidth={3} />
|
|
</button>
|
|
<div className="p-2">
|
|
<div className="aspect-square w-full rounded-md overflow-hidden mb-2 bg-muted">
|
|
{item.image ? (
|
|
<img
|
|
src={item.image}
|
|
alt={item.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">
|
|
No Image
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<p className="text-xs font-medium truncate" title={item.name}>
|
|
{item.name}
|
|
</p>
|
|
<p
|
|
className="text-xs text-muted-foreground truncate"
|
|
title={item.artist}
|
|
>
|
|
{item.artist}
|
|
</p>
|
|
<span className="inline-block text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
|
|
{getTypeLabel(item.type)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|