add input fields for age range

src/components/admin/resources/form.tsx

@@ -41,6 +41,7 @@ import Modal from "react-modal";
 import { type RouterInputs } from "~/utils/api";
 import { PlatformLinkButton } from "~/pages/resources/[id]";
 import { ResourcePhoto } from "~/components/ResourcePhoto";
+import { FieldLabel } from "~/components/forms/inputLabel";
 
 // Required for accessibility
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
@@ -379,6 +380,33 @@ function ResourceSummarySubForm({
           </span>
         </div>
       </div>
+
+      <div>
+        <FieldLabel
+          heading="Age Range"
+          subheading="Specify the minimum and maximum age range supported by the resource"
+        />
+        <div className="mt-2 flex flex-row space-x-4">
+          <GenericInput
+            type="number"
+            placeholder="minimum age"
+            details={register("ages.min", {
+              required: "Field required",
+              valueAsNumber: true,
+            })}
+          />
+          <span className="text-xl">-</span>
+          <GenericInput
+            type="number"
+            placeholder="maximum age"
+            details={register("ages.max", {
+              required: "Field required",
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      </div>
+
       <MultiSelectorMany
         details={register("payment_options", { required: "Field required" })}
         label="Price Category"

src/components/forms/inputLabel.tsx

@@ -0,0 +1,16 @@
+export const FieldLabel = ({
+  heading,
+  subheading,
+}: {
+  heading: string;
+  subheading: string;
+}) => {
+  return (
+    <div>
+      <label className="text-md block font-semibold">{heading}</label>
+      <span className="block text-sm italic text-neutral-400">
+        {subheading}
+      </span>
+    </div>
+  );
+};

src/components/forms/selectors.tsx

@@ -4,6 +4,7 @@ import {
   useFormContext,
   type UseFormRegisterReturn,
 } from "react-hook-form";
+import { FieldLabel } from "./inputLabel";
 
 // generics
 interface ToStringable {
@@ -60,10 +61,7 @@ function MultiSelectorMany<T extends ToStringable>({
     <SelectorContext.Provider value={{ type: "many", updateCallback }}>
       <SelectedManyContext.Provider value={selected}>
         <div className="flex flex-col">
-          <label className="text-md block font-semibold">{label}</label>
+          <FieldLabel heading={label} subheading="Select all that apply" />
-          <span className="block text-sm italic text-neutral-400">
-            Select all that apply
-          </span>
           <input {...details} readOnly type="text" className="hidden" />
           <div className="mt-2 space-x-2 space-y-2 overflow-x-auto">
             {children}
@@ -100,10 +98,7 @@ function MultiSelector<T extends ToStringable>({
     >
       <SelectedUniqueContext.Provider value={selected}>
         <div className="flex flex-col">
-          <label className="text-md block font-semibold">{label}</label>
+          <FieldLabel heading={label} subheading="Select one from below" />
-          <span className="block text-sm italic text-neutral-400">
-            Select one from below
-          </span>
           <input {...details} readOnly type="text" className="hidden" />
           <div className="space-x-2 space-y-2 overflow-x-auto">{children}</div>
         </div>

src/components/forms/textInput.tsx

@@ -50,16 +50,18 @@ function GenericInput<TFieldName extends InternalFieldName>({
   type = "text",
   details,
 }: {
-  label: string;
+  label?: string;
   placeholder?: string;
   type: HTMLInputTypeAttribute;
   details: UseFormRegisterReturn<TFieldName>;
 }) {
   return (
     <section className="w-full space-y-1">
-      <label className="text-md block px-1 font-semibold text-neutral-600">
+      {label ? (
-        {label}
+        <label className="text-md block px-1 font-semibold text-neutral-600">
-      </label>
+          {label}
+        </label>
+      ) : undefined}
       <input
         className="block h-8 w-full rounded-lg border border-neutral-600 px-2 py-1"
         {...details}

src/server/api/routers/auditoryResources.ts

@@ -25,7 +25,14 @@ const AuditoryResourceSchema = z.object({
     required: z.boolean().default(false),
     notice: z.string().nullable().transform(emptyStringToUndefined),
   }),
-  ages: z.object({ min: z.number().int(), max: z.number().int() }),
+  ages: z.object({ min: z.number().int(), max: z.number().int() }).refine(
+    (ages) => {
+      return ages.min < ages.max;
+    },
+    {
+      message: "Minimum supported age must be less than maximum supported age.",
+    }
+  ),
   skills: z.array(z.nativeEnum(Skill)),
   skill_levels: z.array(z.nativeEnum(SkillLevel)),
   payment_options: z.array(z.nativeEnum(PaymentType)),