Attachment

import { Attachment, AttachmentList } from "@/components/vip-ui/attachment";export function AttachmentBasicDemo() {  return (    <AttachmentList className="w-full max-w-md">      <Attachment        key="project-brief"        name="Project brief.pdf"        fileSize={284672}      />      <Attachment key="photos" name="Homepage-preview.png" fileSize={1064960} />      <Attachment key="assets" name="Assets.zip" fileSize={3145728} />    </AttachmentList>  );}

"use client";import { useEffect, useRef, useState } from "react";import type { DropItem, FileDropItem } from "react-aria-components";import { Attachment, AttachmentList } from "@/components/vip-ui/attachment";import { Button } from "@/components/vip-ui/button";import {  DropZone,  DropZoneDescription,  DropZoneIcon,  DropZoneLabel,} from "@/components/vip-ui/drop-zone";import { FileTrigger } from "@/components/vip-ui/file-trigger";type LocalAttachment = { id: string; file: File; previewUrl?: string };const acceptedTypes = ["image/png", "image/jpeg", "application/pdf"];const maxSize = 5 * 1024 * 1024;export function AttachmentDemo() {  const [attachments, setAttachments] = useState<LocalAttachment[]>([]);  const [notice, setNotice] = useState("");  const pickerRef = useRef<HTMLButtonElement>(null);  const previewUrls = useRef(new Set<string>());  useEffect(() => {    const urls = previewUrls.current;    return () => {      for (const url of urls) URL.revokeObjectURL(url);    };  }, []);  function addFiles(incoming: File[]) {    const valid = incoming.filter(      (file) => acceptedTypes.includes(file.type) && file.size <= maxSize,    );    const rejected = incoming.length - valid.length;    const next = valid.map((file) => {      const previewUrl = file.type.startsWith("image/")        ? URL.createObjectURL(file)        : undefined;      if (previewUrl) previewUrls.current.add(previewUrl);      return { id: crypto.randomUUID(), file, previewUrl };    });    setAttachments((current) => [...current, ...next]);    setNotice(      rejected        ? `${rejected} file${rejected === 1 ? " was" : "s were"} skipped. Choose PNG, JPEG, or PDF under 5 MB.`        : `${next.length} file${next.length === 1 ? "" : "s"} added.`,    );  }  function remove(item: LocalAttachment) {    pickerRef.current?.focus();    setAttachments((current) => current.filter(({ id }) => id !== item.id));    setNotice(`${item.file.name} removed.`);    const previewUrl = item.previewUrl;    if (previewUrl) {      window.setTimeout(() => {        URL.revokeObjectURL(previewUrl);        previewUrls.current.delete(previewUrl);      }, 200);    }  }  return (    <div className="grid w-full max-w-md gap-3">      <DropZone        getDropOperation={(types) =>          acceptedTypes.some((type) => types.has(type)) ? "copy" : "cancel"        }        onDrop={async ({ items }) => {          const dropped = await Promise.all(            items              .filter(                (item: DropItem): item is FileDropItem => item.kind === "file",              )              .map((item) => item.getFile()),          );          addFiles(dropped);        }}      >        <DropZoneIcon />        <DropZoneLabel>Add files to a support request</DropZoneLabel>        <DropZoneDescription>          PNG, JPEG, or PDF up to 5 MB each        </DropZoneDescription>        <FileTrigger          acceptedFileTypes={acceptedTypes}          allowsMultiple          onSelect={(files) => {            if (files) addFiles(Array.from(files));          }}        >          <Button ref={pickerRef} variant="outline">            Browse files          </Button>        </FileTrigger>      </DropZone>      <AttachmentList>        {attachments.map((item) => (          <Attachment            key={item.id}            name={item.file.name}            fileSize={item.file.size}            previewUrl={item.previewUrl}            onRemove={() => remove(item)}          />        ))}      </AttachmentList>      <output aria-live="polite" className="text-xs text-muted-foreground">        {notice}      </output>    </div>  );}

"use client";import { useEffect, useState } from "react";import {  Attachment,  AttachmentList,  type AttachmentStatus,} from "@/components/vip-ui/attachment";import { Button } from "@/components/vip-ui/button";type Upload = {  id: string;  name: string;  fileSize: number;  progress: number;  status: AttachmentStatus;  failsAt?: number;};const initial: Upload[] = [  {    id: "brief",    name: "Project brief.pdf",    fileSize: 284672,    progress: 0,    status: "uploading",  },  {    id: "preview",    name: "Homepage-preview.png",    fileSize: 1064960,    progress: 0,    status: "uploading",    failsAt: 60,  },  {    id: "assets",    name: "Assets.zip",    fileSize: 3145728,    progress: 0,    status: "uploading",  },];const steps: Record<string, number> = { brief: 18, preview: 12, assets: 7 };export function AttachmentUploadDemo() {  const [uploads, setUploads] = useState(initial);  const active = uploads.some((upload) => upload.status === "uploading");  useEffect(() => {    if (!active) return;    const timer = window.setInterval(() => {      setUploads((current) =>        current.map((upload) => {          if (upload.status !== "uploading") return upload;          const progress = Math.min(100, upload.progress + steps[upload.id]);          if (upload.failsAt !== undefined && progress >= upload.failsAt) {            return { ...upload, progress, status: "error" };          }          return {            ...upload,            progress,            status: progress >= 100 ? "complete" : "uploading",          };        }),      );    }, 400);    return () => window.clearInterval(timer);  }, [active]);  return (    <div className="grid w-full max-w-md gap-3">      <AttachmentList>        {uploads.map((upload) => (          <Attachment            key={upload.id}            name={upload.name}            fileSize={upload.fileSize}            status={upload.status}            progress={upload.progress}            errorMessage="Upload stopped"            onRetry={() =>              setUploads((current) =>                current.map((item) =>                  item.id === upload.id                    ? {                        ...item,                        progress: 0,                        status: "uploading",                        failsAt: undefined,                      }                    : item,                ),              )            }          />        ))}      </AttachmentList>      <div>        <Button variant="ghost" size="sm" onPress={() => setUploads(initial)}>          Restart        </Button>      </div>    </div>  );}