ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +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() { function Test() {
return ( return (
<main className="w-full min-h-[100vh] flex flex-col justify-center items-center p-4"> <main className="w-full min-h-[100vh] flex flex-col justify-center items-center text-center p-4">
<div> <div className="overflow-x-auto">
<div className="overflow-x-auto"> <table className="border-collapse">
<table className="border-collapse"> <thead>
<thead> <tr className="border-b">
<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( {Array.from(
{ length: Math.ceil(iconNames.length / 10) }, { length: Math.ceil(iconNames.length / 10) },
(_, groupNumber) => groupNumber + 1, (_, groupNumber) => groupNumber + 1,
).flatMap((groupNumber) => [ ).flatMap((groupNumber) => {
<th key={`name-${groupNumber}`} className="text-left p-2 font-medium"> const iconIndex = (groupNumber - 1) * 10 + (rowNumber - 1);
Name const name = iconNames[iconIndex];
</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];
return [ return [
<td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12"> <td key={`name-${groupNumber}-${rowNumber}`} className="font-mono text-sm pl-2 pr-12">
{name ?? ""} {name ?? ""}
</td>, </td>,
...iconStyles.map((iconStyle) => ( ...iconStyles.map((iconStyle) => (
<td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center"> <td key={`${iconStyle}-${groupNumber}-${rowNumber}`} className="p-2 text-center">
{name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null} {name ? <Icon icon={name} iconStyle={iconStyle} size={24} /> : null}
</td> </td>
)), )),
]; ];
})} })}
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</main> </main>
); );