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

new Icon component with 3 icon variations

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-17 04:44:55 +00:00
parent 8dc6291eab
commit c15a69a5ea
4 changed files with 229 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,59 @@
import { useState } from "react";
import LogOutButton from "@/components/log-out-button";
import ThemeToggle from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import ColourPicker from "@/components/ui/colour-picker";
import Icon, { iconNames, iconStyles } from "@/components/ui/icon";
function Test() {
const [colour, setColour] = useState("#e05656");
return (
<main className="w-full h-[100vh] flex flex-col items-center justify-center gap-4 p-4">
<h1 className="text-3xl font-bold">Test</h1>
<main className="w-full min-h-[100vh] flex justify-center items-center gap-32 p-4">
<div className="mt-8 flex flex-col items-center gap-4">
<p className="text-muted-foreground">Other test components</p>
<div className="flex gap-4">
<Button linkTo="/">go back to "/"</Button>
</div>
<LogOutButton />
<ColourPicker colour={colour} onChange={setColour} />
<p className="text-muted-foreground">Simple test page for demo</p>
<div className="flex gap-4">
<Button linkTo="/">go back to "/"</Button>
<ThemeToggle />
</div>
<LogOutButton />
<ColourPicker colour={colour} onChange={setColour} />
<div>
<h1 className="text-2xl font-bold">Icon Demo</h1>
<p className="text-muted-foreground">
All {iconNames.length} icons across {iconStyles.length} styles
</p>
<div className="overflow-x-auto">
<table className="border-collapse">
<thead>
<tr className="border-b">
<th className="text-left p-2 font-medium">Name</th>
{iconStyles.map((iconStyle) => (
<th key={iconStyle} className="text-center p-2 font-medium capitalize">
{iconStyle}
</th>
))}
</tr>
</thead>
<tbody>
{iconNames.map((name) => (
<tr key={name} className="border-b hover:bg-muted/50">
<td className="font-mono text-sm pl-2 pr-12">{name}</td>
{iconStyles.map((iconStyle) => (
<td key={iconStyle} className="p-2 text-center">
<Icon icon={name} iconStyle={iconStyle} size={24} />
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</main>
);
}