79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { Flashcard } from '@/lib/services/flashcards'
|
|
import { FlashcardCard } from './FlashcardCard'
|
|
|
|
interface SearchResultsProps {
|
|
searchState: any
|
|
activeTab: string
|
|
onEdit: (card: Flashcard) => void
|
|
onDelete: (card: Flashcard) => void
|
|
onToggleFavorite: (card: Flashcard) => void
|
|
getCEFRColor: (level: string) => string
|
|
highlightSearchTerm: (text: string, term: string) => React.ReactNode
|
|
getExampleImage: (card: Flashcard) => string | null
|
|
hasExampleImage: (card: Flashcard) => boolean
|
|
onGenerateExampleImage: (card: Flashcard) => void
|
|
generatingCards: Set<string>
|
|
generationProgress: {[cardId: string]: string}
|
|
router: any
|
|
}
|
|
|
|
export const SearchResults: React.FC<SearchResultsProps> = ({
|
|
searchState,
|
|
activeTab,
|
|
onEdit,
|
|
onDelete,
|
|
onToggleFavorite,
|
|
getCEFRColor,
|
|
highlightSearchTerm,
|
|
getExampleImage,
|
|
hasExampleImage,
|
|
onGenerateExampleImage,
|
|
generatingCards,
|
|
generationProgress,
|
|
router
|
|
}) => {
|
|
if (searchState.flashcards.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
{activeTab === 'favorites' ? (
|
|
<>
|
|
<div className="text-yellow-500 text-6xl mb-4">⭐</div>
|
|
<p className="text-gray-500 mb-4">還沒有收藏的詞卡</p>
|
|
<p className="text-sm text-gray-400">在詞卡列表中點擊星星按鈕來收藏重要的詞彙</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-gray-500 mb-4">沒有找到詞卡</p>
|
|
<Link
|
|
href="/generate"
|
|
className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
|
|
>
|
|
創建新詞卡
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{searchState.flashcards.map((card: Flashcard) => (
|
|
<FlashcardCard
|
|
key={card.id}
|
|
flashcard={card}
|
|
searchTerm={searchState.filters.search}
|
|
onEdit={() => onEdit(card)}
|
|
onDelete={() => onDelete(card)}
|
|
onFavorite={() => onToggleFavorite(card)}
|
|
onImageGenerate={() => onGenerateExampleImage(card)}
|
|
isGenerating={generatingCards.has(card.id)}
|
|
generationProgress={generationProgress[card.id] || ''}
|
|
highlightSearchTerm={highlightSearchTerm}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
} |