feat: ai elements (#1143)

components/preview-attachment.tsx

@@ -1,45 +1,55 @@
 import type { Attachment } from '@/lib/types';
-import { LoaderIcon } from './icons';
+import { Loader } from './elements/loader';
+import { CrossSmallIcon, PencilEditIcon } from './icons';
+import { Button } from './ui/button';
 
 export const PreviewAttachment = ({
   attachment,
   isUploading = false,
+  onRemove,
+  onEdit,
 }: {
   attachment: Attachment;
   isUploading?: boolean;
+  onRemove?: () => void;
+  onEdit?: () => void;
 }) => {
   const { name, url, contentType } = attachment;
 
   return (
-    <div data-testid="input-attachment-preview" className="flex flex-col gap-2">
-      <div className="w-20 h-16 aspect-video 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 className="" />
-        )}
+    <div data-testid="input-attachment-preview" className="group relative w-16 h-16 rounded-lg overflow-hidden bg-muted border">
+      {contentType?.startsWith('image') ? (
+        <img
+          src={url}
+          alt={name ?? 'An image attachment'}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        <div className="w-full h-full flex items-center justify-center text-xs text-muted-foreground">
+          File
+        </div>
+      )}
 
-        {isUploading && (
-          <div
-            data-testid="input-attachment-loader"
-            className="animate-spin absolute text-zinc-500"
-          >
-            <LoaderIcon />
-          </div>
-        )}
+      {isUploading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+          <Loader size={16} />
+        </div>
+      )}
+
+      {onRemove && !isUploading && (
+        <Button
+          onClick={onRemove}
+          size="sm"
+          variant="destructive"
+          className="absolute top-0.5 right-0.5 opacity-0 group-hover:opacity-100 transition-opacity size-4 p-0 rounded-full"
+        >
+          <CrossSmallIcon size={8} />
+        </Button>
+      )}
+
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white text-[10px] px-1 py-0.5 truncate">
+        {name}
       </div>
-      <div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div>
     </div>
   );
 };