From 3cdcedddaa4cc3efd30031968ba9d7265e8f1c45 Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Sun, 13 Apr 2025 13:11:30 +0200
Subject: [PATCH] wip pt4

---
 components/upload-component.tsx | 88 +++++++++++++++++++--------------
 1 file changed, 51 insertions(+), 37 deletions(-)

diff --git a/components/upload-component.tsx b/components/upload-component.tsx
index 0d94bf3..cbbbd80 100644
--- a/components/upload-component.tsx
+++ b/components/upload-component.tsx
@@ -458,52 +458,66 @@ const UploadComponent = () => {
   }
 
   return (
-    <div className="w-full max-w-2xl mx-auto">
+    <div className="w-full mx-auto">
       {showUploadForm ? (
-        <form className="space-y-4" onSubmit={onSubmit}>
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor="file">Upload Image</Label>
-            <Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
-          </div>
+        <Card className="w-full">
+          <CardHeader>
+            <CardTitle>Upload Image</CardTitle>
+            <CardDescription>Select an image to upload to {serverChoice}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4" onSubmit={onSubmit}>
+              <div className="grid w-full items-center gap-1.5">
+                <Label htmlFor="file">Select File</Label>
+                <Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
+              </div>
 
-          <div className="grid grid-cols-2 w-full items-center gap-1.5">
-            <Label htmlFor="server-select">Upload to</Label>
-            <Select onValueChange={handleServerChange} value={serverChoice}>
-              <SelectTrigger className="w-full" id="server-select">
-                <SelectValue placeholder={serverChoice} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="blossom.band">blossom.band</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+              <div className="grid grid-cols-2 w-full items-center gap-1.5">
+                <Label htmlFor="server-select">Upload to</Label>
+                <Select onValueChange={handleServerChange} value={serverChoice}>
+                  <SelectTrigger className="w-full" id="server-select">
+                    <SelectValue placeholder={serverChoice} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="blossom.band">blossom.band</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
 
-          {previewUrl && (
-            <div className="mt-4 rounded-md overflow-hidden">
-              <img src={previewUrl || "/placeholder.svg"} alt="Preview" className="w-full max-h-80 object-contain" />
-            </div>
-          )}
+              {previewUrl && (
+                <div className="mt-4 rounded-md overflow-hidden">
+                  <img
+                    src={previewUrl || "/placeholder.svg"}
+                    alt="Preview"
+                    className="w-full max-h-80 object-contain"
+                  />
+                </div>
+              )}
 
-          {isLoading ? (
-            <Button className="w-full" disabled>
-              Uploading... <ReloadIcon className="ml-2 h-4 w-4 animate-spin" />
-            </Button>
-          ) : (
-            <Button className="w-full" type="submit">
-              Upload
-            </Button>
-          )}
-        </form>
+              {isLoading ? (
+                <Button className="w-full" disabled>
+                  Uploading... <ReloadIcon className="ml-2 h-4 w-4 animate-spin" />
+                </Button>
+              ) : (
+                <Button className="w-full" type="submit">
+                  Upload
+                </Button>
+              )}
+            </form>
+          </CardContent>
+        </Card>
       ) : uploadResponse ? (
         <UploadResponseView data={uploadResponse} onReset={resetUpload} />
       ) : (
-        <div className="flex flex-col items-center justify-center p-8">
-          <Spinner />
-          <p className="mt-4">Processing upload...</p>
-        </div>
+        <Card className="w-full">
+          <CardContent className="flex flex-col items-center justify-center p-8">
+            <Spinner />
+            <p className="mt-4">Processing upload...</p>
+          </CardContent>
+        </Card>
       )}
     </div>
   )
 }
 
-export default UploadComponent
\ No newline at end of file
+export default UploadComponent