# DropzoneContent

## Description

A specialized content component designed to display different states within a Dropzone component. DropzoneContent provides predefined styling and layout for empty, uploaded, and loading states, offering a consistent visual experience across different dropzone implementations.

## Aliases

- DropzoneContent
- Dropzone State
- Upload State

## Props Breakdown

**Extends:** Standalone interface (no HTML element inheritance)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `type` | `'Empty' \| 'Uploaded' \| 'Loading'` | - | Yes | The state type to display |
| `className` | `string` | - | No | Additional CSS class names |

## Examples

### Basic Usage

```tsx
import { DropzoneContent } from '@delightui/components';

function BasicDropzoneContentExample() {
  return (
    <div>
      <DropzoneContent type="Empty" />
      <DropzoneContent type="Loading" />
      <DropzoneContent type="Uploaded" />
    </div>
  );
}
```

### Empty State

```tsx
import { DropzoneContent } from '@delightui/components';

function EmptyStateExample() {
  return (
    <DropzoneContent 
      type="Empty"
      className="custom-empty-state"
    />
  );
}
```

### Loading State

```tsx
import { DropzoneContent } from '@delightui/components';

function LoadingStateExample() {
  return (
    <DropzoneContent 
      type="Loading"
      className="custom-loading-state"
    />
  );
}
```

### Uploaded State

```tsx
import { DropzoneContent } from '@delightui/components';

function UploadedStateExample() {
  return (
    <DropzoneContent 
      type="Uploaded"
      className="custom-uploaded-state"
    />
  );
}
```

### Dynamic State

```tsx
import { DropzoneContent } from '@delightui/components';

function DynamicStateExample() {
  const [state, setState] = useState<'Empty' | 'Loading' | 'Uploaded'>('Empty');

  const handleStateChange = () => {
    setState('Loading');
    setTimeout(() => setState('Uploaded'), 2000);
  };

  return (
    <div>
      <DropzoneContent type={state} />
      <button onClick={handleStateChange}>
        Start Upload Process
      </button>
    </div>
  );
}
```

### With Custom Styling

```tsx
import { DropzoneContent } from '@delightui/components';

function CustomStyledExample() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <DropzoneContent 
        type="Empty"
        className="bordered-state"
        style={{ padding: '20px', border: '1px solid #ccc' }}
      />
      
      <DropzoneContent 
        type="Loading"
        className="loading-animation"
        style={{ padding: '20px', backgroundColor: '#f0f8ff' }}
      />
      
      <DropzoneContent 
        type="Uploaded"
        className="success-state"
        style={{ padding: '20px', backgroundColor: '#f0fff0' }}
      />
    </div>
  );
}
```

### Integration with Dropzone

```tsx
import { Dropzone, DropzoneContent } from '@delightui/components';

function IntegratedExample() {
  const [files, setFiles] = useState<File[]>([]);
  const [isUploading, setIsUploading] = useState(false);

  const getDropzoneState = (): 'Empty' | 'Loading' | 'Uploaded' => {
    if (isUploading) return 'Loading';
    if (files.length > 0) return 'Uploaded';
    return 'Empty';
  };

  return (
    <Dropzone
      value={files}
      onValueChange={setFiles}
      empty={<DropzoneContent type="Empty" />}
      loading={<DropzoneContent type="Loading" />}
      uploaded={<DropzoneContent type="Uploaded" />}
    />
  );
}
```

### Conditional Rendering

```tsx
import { DropzoneContent } from '@delightui/components';

function ConditionalRenderingExample() {
  const [showState, setShowState] = useState<'Empty' | 'Loading' | 'Uploaded' | null>(null);

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <button onClick={() => setShowState('Empty')}>Show Empty</button>
        <button onClick={() => setShowState('Loading')}>Show Loading</button>
        <button onClick={() => setShowState('Uploaded')}>Show Uploaded</button>
        <button onClick={() => setShowState(null)}>Hide</button>
      </div>

      {showState && (
        <DropzoneContent type={showState} />
      )}
    </div>
  );
}
```

### Accessibility Example

```tsx
import { DropzoneContent } from '@delightui/components';

function AccessibilityExample() {
  const [currentState, setCurrentState] = useState<'Empty' | 'Loading' | 'Uploaded'>('Empty');

  return (
    <div role="region" aria-label="File upload area">
      <DropzoneContent 
        type={currentState}
        className="accessible-dropzone-content"
        aria-live="polite"
        aria-describedby="upload-instructions"
      />
      
      <div id="upload-instructions" style={{ marginTop: '10px' }}>
        {currentState === 'Empty' && 'Drag and drop files here or click to browse'}
        {currentState === 'Loading' && 'Please wait while your files are being uploaded'}
        {currentState === 'Uploaded' && 'Files have been successfully uploaded'}
      </div>
    </div>
  );
}
```