75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { HistoryCard } from './HistoryCard'
|
|
import type { QueryHistorySummary } from '../types'
|
|
|
|
interface HistoryListProps {
|
|
items: QueryHistorySummary[]
|
|
hasMore: boolean
|
|
onLoadMore: () => void
|
|
isLoadingMore: boolean
|
|
onDelete: (id: number) => void
|
|
isDeleting: boolean
|
|
onClearAll: () => void
|
|
isClearing: boolean
|
|
}
|
|
|
|
export const HistoryList: React.FC<HistoryListProps> = ({
|
|
items,
|
|
hasMore,
|
|
onLoadMore,
|
|
isLoadingMore,
|
|
onDelete,
|
|
isDeleting,
|
|
onClearAll,
|
|
isClearing,
|
|
}) => {
|
|
const handleClearAll = () => {
|
|
if (window.confirm('Are you sure you want to clear all query history? This cannot be undone.')) {
|
|
onClearAll()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{items.length > 0 && (
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={handleClearAll}
|
|
disabled={isClearing}
|
|
className="px-3 py-1.5 text-sm font-medium text-red-600 border border-red-300 rounded hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
|
|
>
|
|
{isClearing ? 'Clearing...' : 'Clear All'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
{items.map((item) => (
|
|
<HistoryCard
|
|
key={item.id}
|
|
item={item}
|
|
onDelete={onDelete}
|
|
isDeleting={isDeleting}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{hasMore && (
|
|
<div className="flex justify-center pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onLoadMore}
|
|
disabled={isLoadingMore}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
|
|
>
|
|
{isLoadingMore && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{isLoadingMore ? 'Loading...' : 'Load More'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|