Agentic UI/AttachmentCard

AttachmentCard

파일 첨부를 표시하는 카드 컴포넌트입니다. 다양한 파일 타입과 업로드 상태를 지원합니다.

Installation

bash
npx axis-cli add attachment-card --agentic

Interactive Demo

📄

analysis-report.pdf

3.1 MB

File Types

🖼️

photo.png

239.3 KB
📄

report.pdf

1.2 MB
💻

index.tsx

4.1 KB
📦

project.zip

14.9 MB
📎

data.bin

869.1 KB

States

Complete

🖼️

done.png

488.3 KB

Uploading

📄

uploading.pdf

1.9 MB45%

Error

📦

failed.zip

47.7 MB업로드 실패

Usage

tsx
import { AttachmentCard } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <div className="space-y-2">
      <AttachmentCard
        type="image"
        name="screenshot.png"
        size={245000}
        status="complete"
        onRemove={() => console.log('삭제')}
      />
      <AttachmentCard
        type="document"
        name="report.pdf"
        size={1250000}
        status="uploading"
        progress={65}
      />
    </div>
  )
}

Props

typeRequired
Type:"image" | "document" | "code" | "archive" | "other"

파일 유형

nameRequired
Type:string

파일 이름

size
Type:number
Default:-

파일 크기 (bytes)

url
Type:string
Default:-

파일 URL

thumbnail
Type:string
Default:-

이미지 썸네일 URL

status
Type:"uploading" | "complete" | "error"
Default:"complete"

파일 상태

progress
Type:number
Default:-

업로드 진행률 (0-100)

onRemove
Type:() => void
Default:-

삭제 콜백

className
Type:string
Default:-

추가 CSS 클래스