Create QuestStep component and display input fields

convex/questFields.ts

@@ -10,6 +10,19 @@ export const getAllFields = query({
   },
 });
 
+export const getFields = query({
+  args: { fieldIds: v.array(v.id("questFields")) },
+  handler: async (ctx, args) => {
+    const fields = await Promise.all(
+      args.fieldIds.map(async (fieldId) => {
+        const field = await ctx.db.get(fieldId);
+        if (field) return field;
+      }),
+    ).then((fields) => fields.filter((field) => field !== undefined));
+    return fields;
+  },
+});
+
 export const createField = userMutation({
   args: {
     type: field,

src/components/Checkbox/Checkbox.tsx

@@ -58,7 +58,7 @@ const boxStyles = tv({
       true: "bg-purple-9 dark:bg-purpledark-9 border-transparent",
     },
     isInvalid: {
-      true: "text-red-9 dark:text-reddark-9 forced-colors:![--color:Mark] group-pressed:[--color:theme(colors.red.800)] dark:group-pressed:[--color:theme(colors.red.700)]",
+      true: "text-red-9 dark:text-reddark-9 forced-colors:![--color:Mark]",
     },
     isDisabled: {
       true: "text-gray-7 dark:text-graydark-7 forced-colors:![--color:GrayText]",

src/components/QuestStep/QuestStep.tsx

@@ -0,0 +1,87 @@
+import { api } from "@convex/_generated/api";
+import type { Doc, Id } from "@convex/_generated/dataModel";
+import { useQuery } from "convex/react";
+import Markdown from "react-markdown";
+import { Card } from "../Card";
+import { CheckboxGroup } from "../Checkbox";
+import { DateField } from "../DateField";
+import { NumberField } from "../NumberField";
+import { Select, SelectItem } from "../Select";
+import { TextArea } from "../TextArea";
+import { TextField } from "../TextField";
+
+export interface QuestStepProps {
+  title: string;
+  description?: string;
+  fields?: Id<"questFields">[];
+}
+
+export function QuestFields(props: { questFields: Doc<"questFields">[] }) {
+  const markupForField = (field: Doc<"questFields">) => {
+    switch (field.type) {
+      case "text":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="text"
+          />
+        );
+      case "email":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="email"
+          />
+        );
+      case "phone":
+        return (
+          <TextField
+            label={field.label}
+            description={field.helpText}
+            type="tel"
+          />
+        );
+      case "textarea":
+        return <TextArea label={field.label} description={field.helpText} />;
+      case "number":
+        return <NumberField label={field.label} description={field.helpText} />;
+      case "select":
+        return (
+          <Select label={field.label} description={field.helpText}>
+            {/* TODO: Add select options */}
+            <SelectItem />
+          </Select>
+        );
+      case "checkbox":
+        return (
+          <CheckboxGroup label={field.label} description={field.helpText} />
+        );
+      case "date":
+        return <DateField label={field.label} description={field.helpText} />;
+      default:
+        return undefined;
+    }
+  };
+
+  return <>{props.questFields.map((field) => markupForField(field))}</>;
+}
+
+export function QuestStep({ title, description, fields }: QuestStepProps) {
+  const questFields = useQuery(api.questFields.getFields, {
+    fieldIds: fields ?? [],
+  });
+
+  return (
+    <Card className="flex flex-col gap-2">
+      <h2 className="text-xl font-semibold">{title}</h2>
+      {description && (
+        <div>
+          <Markdown className="prose dark:prose-invert">{description}</Markdown>
+        </div>
+      )}
+      {questFields && <QuestFields questFields={questFields} />}
+    </Card>
+  );
+}

src/routes/_authenticated/admin/quests/$questId.tsx

@@ -11,14 +11,14 @@ import {
   SelectItem,
   TextField,
 } from "@/components";
+import { QuestStep } from "@/components/QuestStep/QuestStep";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
 import { FIELDS, ICONS } from "@convex/constants";
 import { createFileRoute } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
 import { useState } from "react";
 import { MenuTrigger } from "react-aria-components";
-import Markdown from "react-markdown";
 
 export const Route = createFileRoute("/_authenticated/admin/quests/$questId")({
   component: AdminQuestDetailRoute,
@@ -75,16 +75,11 @@ function AdminQuestDetailRoute() {
               (step, i) =>
                 step && (
                   <li key={`${quest.title}-step-${i}`}>
-                    <Card className="flex flex-col gap-2">
-                      <h2 className="text-xl font-semibold">{step.title}</h2>
-                      {step.description && (
-                        <div>
-                          <Markdown className="prose dark:prose-invert">
-                            {step.description}
-                          </Markdown>
-                        </div>
-                      )}
-                    </Card>
+                    <QuestStep
+                      title={step.title}
+                      description={step.description}
+                      fields={step.fields}
+                    />
                   </li>
                 ),
             )}

src/routes/_authenticated/quests/$questId.tsx

@@ -1,19 +1,18 @@
 import {
   Badge,
   Button,
-  Card,
   Menu,
   MenuItem,
   MenuTrigger,
   PageHeader,
 } from "@/components";
+import { QuestStep } from "@/components/QuestStep/QuestStep";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
 import { ICONS } from "@convex/constants";
 import { RiMoreLine } from "@remixicon/react";
 import { createFileRoute } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
-import Markdown from "react-markdown";
 
 export const Route = createFileRoute("/_authenticated/quests/$questId")({
   component: QuestDetailRoute,
@@ -82,10 +81,11 @@ function QuestDetailRoute() {
             (step, i) =>
               step && (
                 <li key={`${quest.title}-step-${i}`}>
-                  <Card>
-                    <h2 className="text-xl font-medium mb-2">{step.title}</h2>
-                    <Markdown>{step.description}</Markdown>
-                  </Card>
+                  <QuestStep
+                    title={step.title}
+                    description={step.description}
+                    fields={step.fields}
+                  />
                 </li>
               ),
           )}