weapons page style tweaks

app/components/Form.tsx

@@ -111,7 +111,7 @@ export function Form({
 			onChange={(e) => {
 				submit(e.currentTarget)
 			}}
-			className={cn(`flex items-center justify-items-stretch gap-4`, className)}
+			className={cn(`flex items-center gap-4`, className)}
 		>
 			{children}
 		</RemixForm>

app/components/TagList.tsx

@@ -1,13 +1,13 @@
+import { Badge } from "~/components/ui/badge"
+import { titleCase } from "~/utils/titleCase"
+
 export function TagList({ tags }: { tags: string[] }) {
 	return (
 		<div className="center-items flex gap-2 py-1">
 			{tags.map((tag) => (
-				<div
-					key={tag}
-					className="small-caps inline-block rounded bg-neutral-200 p-1.5 text-xs font-bold uppercase text-neutral-500"
-				>
-					{tag}
-				</div>
+				<Badge variant="secondary" key={tag}>
+					{titleCase(tag)}
+				</Badge>
 			))}
 		</div>
 	)

app/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "app/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

app/routes/_pages.codex.skins.tsx

@@ -29,8 +29,8 @@ export default function Skins() {
 
 	return (
 		<>
-			<Form replace className="flex-row justify-between items-end mb-4">
-				<div className="grid w-full max-w-sm items-center gap-1.5">
+			<Form replace className="flex-row justify-between items-end mb-4 gap-8">
+				<div className="grid items-center gap-1.5">
 					<Label htmlFor="name">Search</Label>
 					<Input type="string" name="name" id="name" />
 				</div>

app/routes/_pages.codex.weapons.tsx

@@ -4,9 +4,14 @@ import { Link, useLoaderData, useOutlet } from "@remix-run/react"
 import { TagList } from "~/components/TagList"
 import { getItems } from "~/data/items.server"
 import { WeaponSchema } from "~/data/schemas.server"
-import { Form, FormGroup, TextInput, Checkbox } from "~/components/Form"
+import { Form } from "~/components/Form"
 import { getSearchParam } from "~/utils/getSearchParam"
 import { Img } from "~/components/Img"
+import { Label } from "~/components/ui/label"
+import { Input } from "~/components/ui/input"
+import { Checkbox } from "~/components/ui/checkbox"
+import { titleCase } from "~/utils/titleCase"
+import { Button } from "~/components/ui/button"
 
 export const loader = async ({ request }: LoaderArgs) => {
 	const url = new URL(request.url)
@@ -31,51 +36,76 @@ export default function Weapons() {
 
 	return (
 		<>
-			<Form dir="row">
-				<FormGroup label="Item type">
-					<Checkbox name="type" value="melee" label="Melee" />
-					<Checkbox name="type" value="ranged" label="Ranged" />
-				</FormGroup>
+			<Form replace className="flex-row mb-4 gap-8">
+				<div className="grid items-center gap-1.5">
+					<Label htmlFor="name">Search</Label>
+					<Input type="string" name="name" id="name" />
+				</div>
 
-				<FormGroup label="Class">
-					<Checkbox name="archetype" value="veteran" label="Veteran" />
-					<Checkbox name="archetype" value="zealot" label="Zealot" />
-					<Checkbox name="archetype" value="psyker" label="Psyker" />
-					<Checkbox name="archetype" value="ogryn" label="Ogryn" />
-				</FormGroup>
+				<div className="grid   items-center gap-1.5">
+					<Label>Item type</Label>
+					<div className="flex gap-4">
+						{["melee", "ranged"].map((kind) => (
+							<div key={kind} className="flex items-center space-x-2 h-10">
+								<Checkbox id={kind} name="type" value={kind} />
+								<label
+									htmlFor={kind}
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									{titleCase(kind)}
+								</label>
+							</div>
+						))}
+					</div>
+				</div>
 
-				<TextInput label="Search" name="name" className="ml-auto items-end" />
+				<div className="grid items-center gap-1.5">
+					<Label>Archetype</Label>
+					<div className="flex gap-4">
+						{["veteran", "zealot", "psyker", "ogryn"].map((kind) => (
+							<div key={kind} className="flex items-center space-x-2 h-10">
+								<Checkbox id={kind} name="archetype" value={kind} />
+								<label
+									htmlFor={kind}
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									{titleCase(kind)}
+								</label>
+							</div>
+						))}
+					</div>
+				</div>
 			</Form>
-			<ul className="grid grid-cols-1 md:grid-cols-2">
+
+			<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
 				{weapons.map((weapon) => {
 					return (
-						<li
-							className=" group relative m-2 overflow-hidden rounded bg-white shadow hover:shadow-lg"
-							key={weapon.id}
-						>
-							<div className="pointer-events-none absolute right-0 top-0 z-0 aspect-video h-full overflow-hidden ">
-								<Img
-									data-idk={weapon.preview_image}
-									src={`${weapon.preview_image}.png`}
-									width="256"
-									className="h-full transition duration-75 group-hover:scale-105"
-								/>
-							</div>
-							<Link
-								to={weapon.slug}
-								className="isolate z-10 block h-full w-full p-4"
-							>
-								<div className="mb-2 text-lg font-bold">
-									{weapon.display_name}
-								</div>
-								<TagList tags={weapon.tags} />
-								{/* TODO: Different schema for weapons and curios so this is not optional */}
-								<TagList tags={weapon.archetypes ?? []} />
-							</Link>
+						<li className="group relative" key={weapon.id}>
+							<Button variant="outline" asChild className="items-start">
+								<Link
+									to={weapon.slug}
+									className="isolate z-10 flex flex-col items-start h-full w-full p-4"
+								>
+									<div className="pointer-events-none absolute right-0 top-0 z-0 aspect-video h-full overflow-hidden ">
+										<Img
+											data-idk={weapon.preview_image}
+											src={`${weapon.preview_image}.png`}
+											width="256"
+											className="h-full transition duration-75 group-hover:scale-105"
+										/>
+									</div>
+									<div className="mb-2 text-lg font-bold">
+										{weapon.display_name}
+									</div>
+									<TagList tags={weapon.tags} />
+									<TagList tags={weapon.archetypes} />
+								</Link>
+							</Button>
 						</li>
 					)
 				})}
 			</ul>
+
 			{weapons.length < 1 ? (
 				<div className="px-4 py-6 sm:px-0">
 					<div className="grid h-96 place-content-center rounded-lg border-4 border-dashed border-gray-200">

app/utils/titleCase.ts

@@ -0,0 +1,3 @@
+export function titleCase(str: string): string {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}