88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import type { Flashcard } from '@/lib/services/flashcards'
|
|
|
|
interface FlashcardActionsProps {
|
|
flashcard: Flashcard
|
|
isEditing: boolean
|
|
onToggleFavorite: () => void
|
|
onToggleEdit: () => void
|
|
onDelete: () => void
|
|
className?: string
|
|
}
|
|
|
|
export const FlashcardActions: React.FC<FlashcardActionsProps> = ({
|
|
flashcard,
|
|
isEditing,
|
|
onToggleFavorite,
|
|
onToggleEdit,
|
|
onDelete,
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`flex gap-3 ${className}`}>
|
|
<button
|
|
onClick={onToggleFavorite}
|
|
className={`flex-1 py-3 rounded-lg font-medium transition-colors ${
|
|
flashcard.isFavorite
|
|
? 'bg-yellow-100 text-yellow-700 border border-yellow-300 hover:bg-yellow-200'
|
|
: 'bg-gray-100 text-gray-600 border border-gray-300 hover:bg-yellow-50 hover:text-yellow-600'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill={flashcard.isFavorite ? "currentColor" : "none"}
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
|
|
/>
|
|
</svg>
|
|
{flashcard.isFavorite ? '已收藏' : '收藏'}
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={onToggleEdit}
|
|
className={`flex-1 py-3 rounded-lg font-medium transition-colors ${
|
|
isEditing
|
|
? 'bg-gray-100 text-gray-700 border border-gray-300'
|
|
: 'bg-blue-100 text-blue-700 border border-blue-300 hover:bg-blue-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
{isEditing ? '取消編輯' : '編輯詞卡'}
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={onDelete}
|
|
className="flex-1 py-3 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
刪除詞卡
|
|
</div>
|
|
</button>
|
|
</div>
|
|
)
|
|
} |