107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
interface TableSelectionBarProps {
|
|
count: number
|
|
onClear: () => void
|
|
onExport?: (format: 'csv' | 'xlsx') => void
|
|
}
|
|
|
|
export default function TableSelectionBar({ count, onClear, onExport }: TableSelectionBarProps) {
|
|
if (count === 0) return null
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'sticky',
|
|
bottom: 20,
|
|
zIndex: 50,
|
|
margin: '0 auto',
|
|
width: 'fit-content',
|
|
maxWidth: '92%',
|
|
background: '#0f172a',
|
|
color: '#f8fafc',
|
|
padding: '8px 18px',
|
|
borderRadius: 9999,
|
|
boxShadow: '0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0,0,0,0.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 14,
|
|
fontSize: 13,
|
|
animation: 'fadeIn 0.2s ease',
|
|
border: '1px solid #334155',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 700, color: '#38bdf8' }}>
|
|
<span style={{ fontSize: 14 }}>✓</span>
|
|
<span>{count} selected</span>
|
|
</div>
|
|
|
|
{onExport && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onExport('csv')}
|
|
style={{
|
|
background: '#16a34a',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: 20,
|
|
padding: '5px 12px',
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
transition: 'background 0.15s ease',
|
|
}}
|
|
onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = '#15803d' }}
|
|
onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = '#16a34a' }}
|
|
>
|
|
<span>📤</span> Export CSV
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onExport('xlsx')}
|
|
style={{
|
|
background: '#0284c7',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: 20,
|
|
padding: '5px 12px',
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
transition: 'background 0.15s ease',
|
|
}}
|
|
onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = '#0369a1' }}
|
|
onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = '#0284c7' }}
|
|
>
|
|
<span>📊</span> Export Excel
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClear}
|
|
style={{
|
|
background: 'transparent',
|
|
color: '#94a3b8',
|
|
border: 'none',
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
padding: '4px 6px',
|
|
transition: 'color 0.15s ease',
|
|
}}
|
|
onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = '#f1f5f9' }}
|
|
onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = '#94a3b8' }}
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|