migrated editing client

2025-12-19 12:54:03 -05:00
parent 9de72a6932
commit 0459c9536c
8 changed files with 1285 additions and 192 deletions
--- a/src/components/blog/Dropzone.tsx
+++ b/src/components/blog/Dropzone.tsx
@@ -0,0 +1,115 @@
+import { Show } from "solid-js";
+
+export interface DropzoneProps {
+  onDrop: (files: File[]) => void;
+  accept?: string;
+  fileHolder?: string | ArrayBuffer | null;
+  preSet?: string | null;
+}
+
+export default function Dropzone(props: DropzoneProps) {
+  let inputRef: HTMLInputElement | undefined;
+
+  const handleFileChange = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const files = target.files;
+    if (files && files.length > 0) {
+      props.onDrop(Array.from(files));
+    }
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      props.onDrop(Array.from(files));
+    }
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      class="border-surface2 z-10 my-4 flex border border-dashed bg-transparent shadow-xl"
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onClick={() => inputRef?.click()}
+    >
+      <label
+        for="upload"
+        class="flex h-48 w-48 cursor-pointer items-center justify-center"
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          class="hidden"
+          accept={props.accept || "image/jpg, image/jpeg, image/png"}
+          onChange={handleFileChange}
+          multiple
+        />
+        <Show
+          when={props.fileHolder !== null || props.preSet !== null}
+          fallback={
+            <>
+              <div class="flex flex-col items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="stroke-text h-8 w-8 fill-transparent"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
+                </svg>
+                <span id="drop" class="text-md text-subtext0">
+                  Upload Image
+                  <br />
+                  <span class="text-sm">Click or drag</span>
+                </span>
+              </div>
+            </>
+          }
+        >
+          <div>
+            <Show
+              when={!props.fileHolder && props.preSet === "userDefault"}
+              fallback={
+                <img
+                  src={(props.fileHolder || props.preSet) as string}
+                  class="h-36 w-36 rounded-full object-cover object-center"
+                  alt="upload"
+                />
+              }
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width={1.5}
+                stroke="currentColor"
+                class="mx-auto h-12 w-12"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
+              </svg>
+              <span id="drop" class="text-md text-subtext0">
+                Upload Image
+                <br />
+                <span class="text-sm">Click or drag</span>
+              </span>
+            </Show>
+          </div>
+        </Show>
+      </label>
+    </div>
+  );
+}