Refactor components for improved usability and feature addition

Enhanced `UniversalAccess` and `OpenTrialPlatform` components with new headers and descriptive text to better convey purpose and functions. Refactored `WishingWellForm` by integrating custom input and textarea components for error handling, and improved the `ImageUpload` component for better image management functionality, including optional label handling and an additional `onRemove` function.

Took 13 minutes

Author: mikepsinn

app/dfda/cure-acceleration-act/components/OpenTrialPlatform.tsx

@@ -72,8 +72,11 @@ export default function OpenTrialPlatform() {
       className="rounded-lg border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
     >
       <h2 className="mb-6 text-3xl font-black">
-        Open Source Global Decentralized Trial Platform 🌐💻
+        Decentralized FDA 🌐💻
       </h2>
+      <p className="mb-6 text-xl">
+        Global, Open, Decentralized, & Automated Clinical Trials
+      </p>
       <div className="space-y-6">
         {sections.map((section, index) => (
           <ListCard

app/dfda/cure-acceleration-act/components/UniversalAccess.tsx

@@ -58,7 +58,15 @@ export default function UniversalAccess() {
       transition={{ duration: 0.5 }}
       className="rounded-lg border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
     >
-      <h2 className="mb-4 text-3xl font-black">Medical Freedom 🚪</h2>
+      <h2 className="mb-4 text-3xl font-black">
+        ⚖️ Right to Trial ✊
+      </h2>
+      <p className="mb-6 text-xl">
+        The right of patients to participate in clinical trials and access treatments should be a human right. 
+      </p>
+      <p className="mb-6 text-xl">
+        This provision garuntees:
+      </p>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         {sections.map((section, i) => (
           <motion.div

app/loading.tsx

@@ -12,19 +12,37 @@ const insights = [
     text: `It's sad that a family can be torn apart by something as simple as wild dogs.`,
   },
   {
-    text: "War is stupid.",
+    text: "The US spends 20X more on war and the military than on clinical research",
   },
+  {
+    text: "There is nearly 0 correlation between public support for a bill and its likelihood of passage.",
+  },
+  {
+    text: "For every $1 spent on prevention, we save $5.60 in treatment costs. Yet only 3% of healthcare spending goes to prevention.",
+  },
+  {
+    text: "The U.S. spends twice as much on healthcare as other developed nations, but ranks 38th in health outcomes globally.",
+  },
+  {
+    text: "Fossil fuel subsidies globally amount to $5.9 trillion annually.",
+  },
+  {
+    text: "The U.S. has 5% of the world's population, but 25% of the world's prisoners.",
+  },
+  {
+    text: "In the U.S., $6 in corporate welfare is spent for every $1 spent on food assistance.",
+  }
 ]
 
 export default function Loading() {
   const randomQuote = insights[Math.floor(Math.random() * insights.length)]
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-900 to-slate-800 p-4">
+    <div className="flex min-h-screen items-center justify-center p-4">
       <div className="flex max-w-xl flex-col items-center gap-8 text-center">
-        <div className="h-12 w-12 animate-spin rounded-full border-4 border-indigo-500 border-t-transparent" />
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" />
         <div className="space-y-3">
-          <p className="font-serif text-xl italic text-slate-100">
+          <p className="text-3xl">
             {randomQuote.text}
           </p>
         </div>

components/ui/image-upload.tsx

@@ -3,13 +3,14 @@
 import * as React from "react"
 
 export interface ImageUploadProps {
-  label: string
   value: string | string[]
-  multiple?: boolean
   onChange: (value: string | string[]) => void
+  onRemove?: (index?: number) => void
+  multiple?: boolean
+  label?: string
 }
 
-export function ImageUpload({ label, value, multiple, onChange }: ImageUploadProps) {
+export function ImageUpload({ label, value, multiple, onChange, onRemove }: ImageUploadProps) {
   const inputId = React.useId()
 
   return (

components/wishingWell/wishing-well-form.tsx

@@ -5,10 +5,9 @@ import { useRouter } from "next/navigation"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
+import { cn } from "@/lib/utils"
 
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/use-toast"
 import { ImageUpload } from "@/components/ui/image-upload"
 import type { WishingWell } from "@prisma/client"
@@ -27,6 +26,56 @@ interface WishingWellFormProps {
   wishingWell: WishingWell
 }
 
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string;
+}
+
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: string;
+}
+
+const CustomTextarea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ error, className, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        <textarea
+          ref={ref}
+          className={cn(
+            "w-full rounded border px-3 py-2",
+            error ? "border-red-500" : "border-gray-300",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+CustomTextarea.displayName = "CustomTextarea";
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ error, className, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        <input
+          ref={ref}
+          className={cn(
+            "w-full rounded border px-3 py-2",
+            error ? "border-red-500" : "border-gray-300",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
 export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
   const router = useRouter()
   const {
@@ -41,7 +90,7 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
       name: wishingWell.name,
       description: wishingWell.description || "",
       content: wishingWell.content || "",
-      images: wishingWell.images,
+      images: wishingWell.images || [],
       featuredImage: wishingWell.featuredImage || "",
     },
   })
@@ -83,7 +132,6 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
           <Input
             id="name"
             {...register("name")}
-            className="w-full"
             error={errors.name?.message}
           />
         </div>
@@ -92,7 +140,7 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
           <label htmlFor="description" className="text-sm font-medium">
             Description
           </label>
-          <Textarea
+          <CustomTextarea
             id="description"
             {...register("description")}
             className="min-h-[100px]"
@@ -104,7 +152,7 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
           <label htmlFor="content" className="text-sm font-medium">
             Content
           </label>
-          <Textarea
+          <CustomTextarea
             id="content"
             {...register("content")}
             className="min-h-[200px]"
@@ -115,8 +163,11 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
         <div className="space-y-2">
           <label className="text-sm font-medium">Featured Image</label>
           <ImageUpload
-            value={watch("featuredImage")}
-            onChange={(url) => setValue("featuredImage", url)}
+            value={watch("featuredImage") ?? ""}
+            onChange={(url: string | string[]) => {
+              const finalUrl = Array.isArray(url) ? url[0] : url
+              setValue("featuredImage", finalUrl)
+            }}
             onRemove={() => setValue("featuredImage", "")}
           />
         </div>
@@ -125,14 +176,19 @@ export function WishingWellForm({ wishingWell }: WishingWellFormProps) {
           <label className="text-sm font-medium">Additional Images</label>
           <ImageUpload
             multiple
-            value={watch("images")}
-            onChange={(urls) => setValue("images", urls)}
-            onRemove={(index) => {
-              const currentImages = watch("images") || []
-              setValue(
-                "images",
-                currentImages.filter((_, i) => i !== index)
-              )
+            value={watch("images") ?? []}
+            onChange={(urls: string | string[]) => {
+              const finalUrls = Array.isArray(urls) ? urls : [urls]
+              setValue("images", finalUrls)
+            }}
+            onRemove={(index?: number) => {
+              if (typeof index !== 'undefined') {
+                const currentImages = watch("images") ?? []
+                setValue(
+                  "images",
+                  currentImages.filter((_, i) => i !== index)
+                )
+              }
             }}
           />
         </div>

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "type-check": "tsc --noEmit",
     "turbo": "next dev --turbo",
     "start": "next start",
     "lint": "next lint",
@@ -30,8 +31,7 @@
     "deps:check": "depcheck",
     "deps:check:size": "npm-check",
     "deps:check:comprehensive": "cost-of-modules",
-    "deps:unused-exports": "ts-prune",
-    "type-check": "tsc --noEmit"
+    "deps:unused-exports": "ts-prune"
   },
   "prisma": {
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"