Refactor to use hooks (#436)

components/custom/preview-attachment.tsx

@@ -0,0 +1,44 @@
+import { Attachment } from "ai";
+
+import { LoaderIcon } from "./icons";
+
+export const PreviewAttachment = ({
+  attachment,
+  isUploading = false,
+}: {
+  attachment: Attachment;
+  isUploading?: boolean;
+}) => {
+  const { name, url, contentType } = attachment;
+
+  return (
+    <div className="flex flex-col gap-2 max-w-16">
+      <div className="h-20 w-16 bg-muted rounded-md relative flex flex-col items-center justify-center">
+        {contentType ? (
+          contentType.startsWith("image") ? (
+            // NOTE: it is recommended to use next/image for images
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              key={url}
+              src={url}
+              alt={name ?? "An image attachment"}
+              className="rounded-md size-full object-cover"
+            />
+          ) : (
+            <div className=""></div>
+          )
+        ) : (
+          <div className=""></div>
+        )}
+
+        {isUploading && (
+          <div className="animate-spin absolute text-zinc-500">
+            <LoaderIcon />
+          </div>
+        )}
+      </div>
+
+      <div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div>
+    </div>
+  );
+};