Attachment

 1import { Attachment } from "@/components/wensity/attachment";
 2
 3export function AttachmentCompact() {
 4  return (
 5    <div className="flex flex-col gap-2">
 6      <Attachment variant="compact" fileName="invoice-2024-q4.pdf" fileSize={182_000} />
 7      <Attachment variant="compact" fileName="brand-assets.zip" fileSize={8_400_000} />
 8      <Attachment variant="compact" fileName="notes.txt" fileSize={4_200} />
 9    </div>
10  );
11}

 1import { Attachment } from "@/components/wensity/attachment";
 2
 3export function AttachmentPreview() {
 4  return (
 5    <div className="flex flex-wrap gap-3">
 6      <Attachment
 7        variant="preview"
 8        fileName="workspace.png"
 9        fileSize={820_000}
10        thumbnailSrc="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=300&q=80"
11      />
12      <Attachment
13        variant="preview"
14        fileName="desk-reference.jpg"
15        fileSize={1_100_000}
16        thumbnailSrc="https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=300&q=80"
17      />
18    </div>
19  );
20}

 1import { Attachment } from "@/components/wensity/attachment";
 2
 3export function AttachmentUpload() {
 4  return (
 5    <div className="flex flex-col gap-2">
 6      <Attachment variant="upload" fileName="selected-file.pdf" status="pending" />
 7      <Attachment
 8        variant="upload"
 9        fileName="design-system.zip"
10        status="uploading"
11        progress={64}
12      />
13      <Attachment variant="upload" fileName="market-research.pdf" status="processing" />
14      <Attachment
15        variant="upload"
16        fileName="financial-model.xlsx"
17        status="error"
18        errorMessage="Upload failed. Try again."
19        onRetry={() => {}}
20      />
21      <Attachment
22        variant="upload"
23        fileName="uploaded-report.pdf"
24        status="success"
25        fileSize={1_800_000}
26      />
27    </div>
28  );
29}

 1import { useState } from "react";
 2import { Attachment } from "@/components/wensity/attachment";
 3
 4export function AttachmentRemovable() {
 5  const [files, setFiles] = useState([
 6    { id: "1", name: "design-system.fig", size: 5_800_000 },
 7    { id: "2", name: "user-research.pdf", size: 1_100_000 },
 8  ]);
 9
10  return (
11    <div className="flex flex-col gap-2">
12      {files.map((file) => (
13        <Attachment
14          key={file.id}
15          variant="removable"
16          fileName={file.name}
17          fileSize={file.size}
18          onRemove={() => setFiles((prev) => prev.filter((f) => f.id !== file.id))}
19        />
20      ))}
21    </div>
22  );
23}

 1import { Attachment } from "@/components/wensity/attachment";
 2
 3export function AttachmentDownload() {
 4  return (
 5    <Attachment
 6      variant="download"
 7      fileName="onboarding-guide.pdf"
 8      fileSize={960_000}
 9      downloadHref="https://example.com/onboarding-guide.pdf"
10    />
11  );
12}