50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface LeaderboardTableShellProps {
|
|
columns: {
|
|
key: string;
|
|
label: string;
|
|
align?: 'left' | 'center' | 'right';
|
|
width?: string;
|
|
}[];
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function LeaderboardTableShell({ columns, children, className = '' }: LeaderboardTableShellProps) {
|
|
return (
|
|
<Box
|
|
rounded="xl"
|
|
bg="bg-iron-gray/30"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
overflow="hidden"
|
|
className={className}
|
|
>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-charcoal-outline/50 bg-graphite-black/50">
|
|
{columns.map((col) => (
|
|
<th
|
|
key={col.key}
|
|
className={`px-4 py-3 text-[10px] uppercase tracking-widest font-bold text-gray-500 ${
|
|
col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
|
|
}`}
|
|
style={col.width ? { width: col.width } : {}}
|
|
>
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-charcoal-outline/30">
|
|
{children}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Box>
|
|
);
|
|
}
|