Spaces:
Running
Running
File size: 2,574 Bytes
b72deed | 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 | import React from 'react'
import { Star, Trash2, ChevronRight } from 'lucide-react'
interface FavoriteItem {
id: string
name: string
}
interface SidebarProps {
favorites: FavoriteItem[]
onSearch: (id: string, months: number) => void
onToggleFavorite: (id: string) => void
onViewFavorites: () => void
months: number
}
export const Sidebar: React.FC<SidebarProps> = ({
favorites,
onSearch,
onToggleFavorite,
onViewFavorites,
months,
}) => (
<aside className="lg:col-span-1 space-y-4">
<div className="bg-slate-900 border border-slate-800 rounded-xl p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<Star className="text-yellow-500" size={16} fill="currentColor" />
<h2 className="font-bold text-white text-sm">我的最愛</h2>
</div>
{favorites.length > 0 && (
<button
onClick={onViewFavorites}
className="flex items-center gap-0.5 text-xs text-slate-500 hover:text-blue-400 transition-colors"
>
全部 <ChevronRight size={12} />
</button>
)}
</div>
{favorites.length === 0 ? (
<p className="text-xs text-slate-600 italic">尚未加入任何股票</p>
) : (
<div className="space-y-1">
{favorites.map((fav) => (
<div key={fav.id} className="flex items-center justify-between group py-1">
<button
onClick={() => onSearch(fav.id, months)}
className="text-sm text-slate-300 hover:text-blue-400 transition-colors flex-1 text-left truncate"
>
<span className="font-mono font-bold mr-2 text-white">{fav.id}</span>
<span className="text-xs text-slate-400">{fav.name}</span>
</button>
<button
onClick={() => onToggleFavorite(fav.id)}
className="opacity-0 group-hover:opacity-100 p-1 text-slate-600 hover:text-red-400 transition-all flex-shrink-0"
title="移除"
>
<Trash2 size={13} />
</button>
</div>
))}
<button
onClick={onViewFavorites}
className="w-full mt-2 pt-2 border-t border-slate-800 flex items-center justify-center gap-1 text-xs text-slate-500 hover:text-yellow-400 transition-colors py-1"
>
<Star size={11} />
管理我的最愛
</button>
</div>
)}
</div>
</aside>
)
|