Improve home page with separate data and resource pack cards

src/app/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 	return <header>
 		<div class="title">
 			<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
-			<h2>{title}</h2>
+			<h1>{title}</h1>
 			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
 				{config.generators
 					.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))

src/app/components/ToolCard.tsx

@@ -3,16 +3,25 @@ import { Icons } from './Icons'
 
 type ToolCardProps = {
 	title: string,
-	link: string,
+	desc?: string,
+	link?: string,
 	icon?: keyof typeof Icons,
 	children?: ComponentChildren,
 }
-export function ToolCard({ title, link, icon, children }: ToolCardProps) {
-	return <a class="tool-card" href={link}>
-		{icon && Icons[icon]}
-		<div>
-			<h3>{title}</h3>
-			{children}
+export function ToolCard({ title, desc, link, icon, children }: ToolCardProps) {
+	const content = <>
+		<div class="tool-head">
+			{icon && Icons[icon]}
+			<div>
+				<h3>{title}</h3>
+				<p>{desc}</p>
+			</div>
 		</div>
-	</a>
+		{children && <div class="tool-body">
+			{children}
+		</div>}
+	</>
+	return link
+		? <a class="tool-card" href={link}>{content}</a>
+		: <div class="tool-card">{content}</div>
 }

src/app/pages/Category.tsx

@@ -13,7 +13,7 @@ export function Category({ category, lang, changeTitle }: WorldgenProps) {
 	const loc = locale.bind(null, lang)
 	changeTitle(loc('title.generator_category', loc(category)))
 	return <main>
-		<div class="home">
+		<div class="category">
 			{config.generators.filter(g => g.category === category).map(g => 
 				<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
 			)}

src/app/pages/Home.tsx

@@ -11,24 +11,29 @@ type HomeProps = {
 export function Home({ lang, changeTitle }: HomeProps) {
 	const loc = locale.bind(null, lang)
 	changeTitle(loc('title.home'))
+	console.log(config.generators)
 	return <main>
 		<div class="home">
-			{config.generators.filter(g => !g.category).map(g => 
-				<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
-			)}
-			<ToolCard title={loc('worldgen')} link="/worldgen/" />
-			<hr />
-			<ToolCard title={loc('assets')} link="/assets/" />
-			<hr />
-			<ToolCard title="Report Inspector" icon="report" link="https://misode.github.io/report/">
-				<p>Analyse your performance reports</p>
+			<ToolCard title="Data packs">
+				{config.generators.filter(g => !g.category).map(g => 
+					<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
+				)}
+				<ToolCard title={loc('worldgen')} link="/worldgen/" />
 			</ToolCard>
-			<ToolCard title="Minecraft Sounds" icon="sounds" link="/sounds/">
-				<p>Browse through and mix all the vanilla sounds</p>
-			</ToolCard>
-			<ToolCard title="Data Pack Upgrader" link="https://misode.github.io/upgrader/">
-				<p>Convert your 1.16 data packs to 1.17</p>
+			<ToolCard title="Resource packs">
+				{config.generators.filter(g => g.category === 'assets').map(g =>
+					<ToolCard title={loc(g.id)} link={cleanUrl(g.url)} />
+				)}
 			</ToolCard>
+			<ToolCard title="Report Inspector" icon="report"
+				link="https://misode.github.io/report/"
+				desc="Analyse your performance reports" />
+			<ToolCard title="Minecraft Sounds" icon="sounds"
+				link="/sounds/"
+				desc="Browse through and mix all the vanilla sounds" />
+			<ToolCard title="Data Pack Upgrader"
+				link="https://misode.github.io/upgrader/"
+				desc="Convert your 1.16 data packs to 1.17" />
 			<ToolCard title="Technical Changelog" link="/changelog/" />
 		</div>
 	</main>