make mission board filterable by category

danreeves · Oct 9, 2023 · 98b0694 · 98b0694
1 parent b58795d
commit 98b0694
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -31,7 +31,7 @@ export default function Layout({ user }: { user: User | null }) {
 				<Disclosure as="nav" className="border-b">
 					{({ open }) => (
 						<>
-							<div className="mx-auto max-w-7xl sm:px-4 xl:p-0">
+							<div className="mx-auto max-w-7xl px-4 xl:p-0">
 								<div className="flex h-12 items-center justify-between">
 									<div className="flex items-center">
 										<Link to="/" className="flex items-center mr-4">

diff --git a/app/routes/mission-board.tsx b/app/routes/mission-board.tsx
@@ -14,15 +14,17 @@ import { ExclamationCircleIcon } from "@heroicons/react/24/outline"
 import { useLoaderData } from "@remix-run/react"
 import { Mission, sideObjectiveToType } from "~/components/Mission"
 import { isKeyOf } from "~/utils/isKeyOf"
-// import {
-// 	Select,
-// 	SelectContent,
-// 	SelectGroup,
-// 	SelectItem,
-// 	SelectLabel,
-// 	SelectTrigger,
-// 	SelectValue,
-// } from "~/components/ui/select"
+import { Form } from "~/components/Form"
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "~/components/ui/select"
+import { Label } from "~/components/ui/label"
 
 const FILTER_BY_CATEGORY: Record<
 	string,
@@ -112,21 +114,24 @@ export default function Missions() {
 		<>
 			<h1 className="sr-only">Missions</h1>
 			<div className="justify-center overflow-y-scroll">
-				{/* <div className="m-12">
-					<Select>
-						<SelectTrigger className="w-[180px]">
-							<SelectValue placeholder="Category" />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectGroup>
-								<SelectItem value="all">All</SelectItem>
-								<SelectItem value="regular">Regular</SelectItem>
-								<SelectItem value="Auric">Auric</SelectItem>
-							</SelectGroup>
-						</SelectContent>
-					</Select>
-				</div> */}
-				<div className="m-12 flex flex-wrap justify-evenly gap-2">
+				<Form replace className="mx-auto max-w-7xl py-6 px-6 lg:px-8">
+					<div className="grid items-center gap-1.5">
+						<Label htmlFor="name">Category</Label>
+						<Select name="category" defaultValue="all">
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Category" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									<SelectItem value="all">All</SelectItem>
+									<SelectItem value="regular">Regular</SelectItem>
+									<SelectItem value="auric">Auric</SelectItem>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
+				</Form>
+				<div className="m-12 mt-0 flex flex-wrap justify-evenly gap-2">
 					{missions.map((mission) => (
 						<Mission
 							key={mission.id}