add resource icon file chooser

src/components/admin/resources/form.tsx

@@ -0,0 +1,98 @@
+import { type AuditoryResource } from "@prisma/client";
+import Image from "next/image";
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+
+/**
+ * Renders the image selector for resource form.
+ *
+ * File needs to be path relative to resource_logos/
+ */
+const SelectImageInput = ({ file }: { file?: string }) => {
+  return (
+    <>
+      <label
+        htmlFor="resource-image-file"
+        className="bg-whit group relative cursor-pointer overflow-hidden rounded-xl border border-neutral-400 drop-shadow-lg"
+      >
+        <Image
+          className="w-fulle"
+          src={`/resource_logos/${file ?? ""}`}
+          alt={`resource logo`}
+          width={512}
+          height={512}
+        />
+        <div className="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center group-hover:grid group-hover:bg-white/70">
+          <PencilSquareIcon className="w-16 text-black/50" />
+        </div>
+      </label>
+      <input
+        accept="image/*"
+        id="resource-image-file"
+        type="file"
+        className="hidden"
+      ></input>
+    </>
+  );
+};
+
+/**
+ * Contains the input fields for editing the links for a resource
+ * @returns
+ */
+const ResourceLinkSubForm = ({ resource }: { resource?: AuditoryResource }) => {
+  return (
+    <div className="mx-4">
+      <h1 className="mb-2 border-b border-neutral-400">Links</h1>
+      <div className="mx-auto flex w-48 flex-col space-y-2">
+        {/** Insert existing links here */}
+        <button type="button">
+          <div className="flex h-14 flex-row space-x-2 rounded-lg border-2 border-neutral-900 bg-amber-300 px-2 align-middle hover:bg-amber-200">
+            <span className="my-auto text-sm font-bold">Add link</span>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Resource summary inputs - ie description, manufacturer, etc.
+ */
+const ResourceSummarySubForm = ({
+  resource,
+}: {
+  resource?: AuditoryResource;
+}) => {
+  return (
+    <>
+      <div className="flex flex-row space-x-4 p-4">
+        <div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
+          <SelectImageInput file={resource?.icon} />
+        </div>
+      </div>
+      <div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
+        {/** Manufacturer info */}
+      </div>
+      <div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
+        <span className="px-2 py-2 text-sm text-neutral-200">
+          Ages {/** Age range here */}
+        </span>
+      </div>
+    </>
+  );
+};
+
+const ResourceForm = ({ resource }: { resource?: AuditoryResource }) => {
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
+      <div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
+        <ResourceLinkSubForm resource={resource} />
+      </div>
+      <div className="justify-left flex flex-col pb-5">
+        <ResourceSummarySubForm resource={resource} />
+      </div>
+    </div>
+  );
+};
+
+export { ResourceForm };

src/pages/resources/[id]/edit.tsx

@@ -7,12 +7,12 @@ import {
 } from "next";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
-import { ResourceInfo, ResourceDescription } from "~/components/ResourceTable";
 import { AdminBarLayout } from "~/components/admin/ControlBar";
 import { AdminActionLink } from "~/components/admin/common";
 import { appRouter } from "~/server/api/root";
 import { prisma } from "~/server/db";
 import Image from "next/image";
+import { ResourceForm } from "~/components/admin/resources/form";
 
 export const getServerSideProps: GetServerSideProps<{
   resource: AuditoryResource;
@@ -78,28 +78,7 @@ const EditResourcePage = (
         ]}
       >
         <main className="mb-12">
-          <div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
-            <div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
-              <div className="mx-4">
-                <h1 className="mb-2 border-b border-neutral-400">Links</h1>
-              </div>
-            </div>
-            <div className="justify-left flex flex-col pb-5">
-              <ResourceInfo resource={resource} />
-              <div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
-                <ResourceDescription
-                  manufacturer={resource.manufacturer}
-                  description={resource.description}
-                />
-              </div>
-              <div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
-                <span className="px-2 py-2 text-sm text-neutral-200">
-                  Ages {resource.ages.min}
-                  {resource.ages.max >= 100 ? "+" : `-${resource.ages.max}`}
-                </span>
-              </div>
-            </div>
-          </div>
+          <ResourceForm resource={resource} />
         </main>
       </AdminBarLayout>
       <Footer />