continued UI consolidation

src/components/ui/AttachmentThumbnail.tsx

@@ -0,0 +1,60 @@
+import { Show } from "solid-js";
+import type { JSX } from "solid-js";
+import IconButton from "./IconButton";
+import XCircle from "~/components/icons/XCircle";
+
+export interface AttachmentThumbnailProps {
+  /** The URL of the file (either S3 URL or data URL) */
+  fileUrl: string;
+  /** Whether the file is a video */
+  isVideo: boolean;
+  /** Callback when the copy button is clicked */
+  onCopy: () => void;
+  /** Callback when the remove button is clicked */
+  onRemove: () => void;
+  /** Alt text for the image */
+  alt?: string;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+export default function AttachmentThumbnail(props: AttachmentThumbnailProps) {
+  return (
+    <div class={props.class}>
+      <IconButton
+        icon={
+          <XCircle
+            height={24}
+            width={24}
+            stroke={"currentColor"}
+            strokeWidth={1}
+          />
+        }
+        onClick={props.onRemove}
+        aria-label={`Remove ${props.alt || "attachment"}`}
+        variant="danger"
+        class="hover:bg-crust hover:bg-opacity-80 absolute z-10 ml-4 pb-[120px]"
+      />
+      <button type="button" onClick={props.onCopy} class="relative">
+        <Show
+          when={props.isVideo}
+          fallback={
+            <img
+              src={props.fileUrl}
+              class="mx-4 my-auto h-36 w-36 object-cover"
+              alt={props.alt || "attachment"}
+            />
+          }
+        >
+          <video
+            src={props.fileUrl}
+            class="mx-4 my-auto h-36 w-36 object-cover"
+            controls
+          />
+        </Show>
+      </button>
+    </div>
+  );
+}
+
+export { AttachmentThumbnail };