ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Test.tsx

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-27 21:03:57 +00:00
parent b41273510c
commit bb125dbc87
1 changed files with 41 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
packages/frontend/src/pages/Test.tsx
View File

@@ -2,56 +2,51 @@ import Icon, { iconNames, iconStyles } from "@/components/ui/icon";
function Test() {
return (
<main className="w-full min-h-[100vh] flex flex-col justify-center items-center p-4">
<div>
<div className="overflow-x-auto">
<table className="border-collapse">
<thead>
<tr className="border-b">
<main className="w-full min-h-[100vh] flex flex-col justify-center items-center text-center p-4">
<div className="overflow-x-auto">
<table className="border-collapse">
<thead>
<tr className="border-b">
{Array.from(
{ length: Math.ceil(iconNames.length / 10) },
(_, groupNumber) => groupNumber + 1,
).flatMap((groupNumber) => [
<th key={`name-${groupNumber}`} className="text-left p-2 font-medium">
Name
</th>,
...iconStyles.map((iconStyle) => (
<th key={`${iconStyle}-${groupNumber}`} className="text-center p-2 font-medium capitalize">
{iconStyle}
</th>
)),
])}
</tr>
</thead>
<tbody>
{Array.from({ length: 10 }, (_, rowNumber) => rowNumber + 1).map((rowNumber) => (
<tr key={`row-${rowNumber}`} className="border-b hover:bg-muted/50">
{Array.from(
{ length: Math.ceil(iconNames.length / 10) },
(_, groupNumber) => groupNumber + 1,
).flatMap((groupNumber) => [
<th key={`name-${groupNumber}`} className="text-left p-2 font-medium">
Name
</th>,
...iconStyles.map((iconStyle) => (
<th
key={`${iconStyle}-${groupNumber}`}
className="text-center p-2 font-medium capitalize"
>
{iconStyle}
</th>
)),
])}
</tr>
</thead>
<tbody>
{Array.from({ length: 10 }, (_, rowNumber) => rowNumber + 1).map((rowNumber) => (
<tr key={`row-${rowNumber}`} className="border-b hover:bg-muted/50">
{Array.from(
{ length: Math.ceil(iconNames.length / 10) },
(_, groupNumber) => groupNumber + 1,
).flatMap((groupNumber) => {
const iconIndex = (groupNumber - 1) * 10 + (rowNumber - 1);
const name = iconNames[iconIndex];
).flatMap((groupNumber) => {
const iconIndex = (groupNumber - 1) * 10 + (rowNumber - 1);
const name = iconNames[iconIndex];
return [
<td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12">
{name ?? ""}
</td>,
...iconStyles.map((iconStyle) => (
<td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center">
{name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null}
</td>
)),
];
})}
</tr>
))}
</tbody>
</table>
</div>
return [
<td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12">
{name ?? ""}
</td>,
...iconStyles.map((iconStyle) => (
<td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center">
{name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null}
</td>
)),
];
})}
</tr>
))}
</tbody>
</table>
</div>
</main>
);