# DropzoneSupportedFormats

## Description

A text component that automatically displays the supported file formats for a dropzone. It reads the accepted file types from the Dropzone context and formats them into a readable list, helping users understand what file types they can upload.

## Aliases

- DropzoneSupportedFormats
- SupportedFormats
- AcceptedFileTypes
- FileFormatList

## Props Breakdown

**Extends:** `Text` component props

All `Text` component props are supported (type, size, weight, color, className, etc.).

## Examples

### Basic Usage
```tsx
import { Dropzone, DropzoneSupportedFormats, DropzoneContent } from '@delightui/components';

function BasicSupportedFormatsExample() {
  return (
    <Dropzone accept={{ 'image/*': ['.jpg', '.jpeg', '.png', '.gif'] }}>
      <DropzoneContent>
        <p>Upload your images</p>
        <DropzoneSupportedFormats 
          type="Caption" 
          color="Secondary" 
        />
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Document Upload with Formats
```tsx
function DocumentUploadExample() {
  const documentTypes = {
    'application/pdf': ['.pdf'],
    'application/msword': ['.doc'],
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
    'text/plain': ['.txt']
  };

  return (
    <Dropzone accept={documentTypes}>
      <DropzoneContent>
        <div className="upload-area">
          <h3>Upload Documents</h3>
          <p>Drop your files here or click to browse</p>
          
          <div className="format-info">
            <DropzoneSupportedFormats 
              type="Body"
              size="Small"
              color="Secondary"
            />
          </div>
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Multiple File Type Categories
```tsx
function MultipleTypesExample() {
  const mediaTypes = {
    'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
    'video/*': ['.mp4', '.avi', '.mov', '.wmv'],
    'audio/*': ['.mp3', '.wav', '.ogg', '.m4a']
  };

  return (
    <Dropzone accept={mediaTypes} multiple>
      <DropzoneContent>
        <div className="media-upload">
          <h3>Upload Media Files</h3>
          <p>Images, videos, and audio files are supported</p>
          
          <DropzoneSupportedFormats 
            type="Caption"
            size="Small"
            className="format-list"
          />
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Styled Format Display
```tsx
function StyledFormatExample() {
  return (
    <Dropzone accept={{ 'image/*': ['.jpg', '.png'], 'application/pdf': ['.pdf'] }}>
      <DropzoneContent>
        <div className="styled-upload">
          <div className="upload-icon">📁</div>
          <h4>Choose Files</h4>
          
          <div className="format-display">
            <DropzoneSupportedFormats 
              type="Body"
              size="Small"
              weight="Medium"
              className="supported-formats"
              style={{
                padding: '8px 12px',
                backgroundColor: '#f5f5f5',
                borderRadius: '4px',
                border: '1px solid #ddd'
              }}
            />
          </div>
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Conditional Format Display
```tsx
function ConditionalFormatExample() {
  return (
    <Dropzone accept={{ 'image/*': ['.jpg', '.png', '.gif'] }}>
      <DropzoneContent>
        {({ files, isDragActive }) => (
          <div className="conditional-upload">
            {isDragActive ? (
              <p>Drop files here...</p>
            ) : files.length > 0 ? (
              <div className="files-selected">
                <p>{files.length} files selected</p>
              </div>
            ) : (
              <div className="upload-prompt">
                <p>Drag & drop images here</p>
                <DropzoneSupportedFormats 
                  type="Caption" 
                  color="Tertiary"
                />
              </div>
            )}
          </div>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Help Text with Formats
```tsx
function HelpTextExample() {
  return (
    <Dropzone accept={{ 'application/pdf': ['.pdf'], 'image/*': ['.jpg', '.png'] }}>
      <DropzoneContent>
        <div className="help-upload">
          <h3>Upload Resume</h3>
          <p>Please upload your resume in PDF format or as an image</p>
          
          <div className="help-info">
            <Icon icon="Info" size="Small" />
            <DropzoneSupportedFormats 
              type="Caption"
              className="inline-formats"
            />
          </div>
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```