# ResponsiveComponent

A utility component that renders different components based on screen width breakpoints. It provides a declarative way to handle responsive design by allowing you to specify different component configurations for different screen sizes, making it easy to create adaptive user interfaces.

## Aliases

- ResponsiveComponent
- ResponsiveRenderer
- BreakpointComponent

## Props Breakdown

**Extends:** This component does not extend standard HTML elements as it's a utility component that renders different components based on breakpoints.

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | `undefined` | No | CSS class name for the wrapper element |
| `component` | `React.FC<T>` | `undefined` | Yes | The component to render at different breakpoints |
| `children` | `React.ReactElement<BreakpointProps<T>>[]` | `undefined` | Yes | Array of breakpoint configurations |

### BreakpointProps

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `width` | `number` | `undefined` | Yes | Minimum width in pixels for this breakpoint |
| `children` | `React.ReactElement<T>` | `undefined` | Yes | Component configuration for this breakpoint |

This component does not add standard HTML attributes as it dynamically renders other components.

## Examples

### Basic Responsive Button

```tsx
import { ResponsiveComponent, Button } from '@delightui/components';

function ResponsiveButtonExample() {
  return (
    <ResponsiveComponent component={Button}>
      <div width={0}>
        <Button size="Small" type="Outlined">
          Mobile Button
        </Button>
      </div>
      
      <div width={768}>
        <Button size="Medium" type="Filled">
          Tablet Button
        </Button>
      </div>
      
      <div width={1024}>
        <Button size="Large" type="Filled" leadingIcon={<Icon name="AddFilled" />}>
          Desktop Button
        </Button>
      </div>
    </ResponsiveComponent>
  );
}
```

### Responsive Text Sizing

```tsx
import { ResponsiveComponent, Text } from '@delightui/components';

function ResponsiveTextExample() {
  return (
    <ResponsiveComponent component={Text}>
      <div width={0}>
        <Text size="medium" weight="normal">
          Mobile Text
        </Text>
      </div>
      
      <div width={768}>
        <Text size="large" weight="medium">
          Tablet Text
        </Text>
      </div>
      
      <div width={1024}>
        <Text size="xlarge" weight="bold">
          Desktop Text
        </Text>
      </div>
    </ResponsiveComponent>
  );
}
```

### Responsive Navigation

```tsx
import { ResponsiveComponent, Button, IconButton, Icon } from '@delightui/components';

function ResponsiveNavigationExample() {
  const handleNavigation = (page: string) => {
    console.log(`Navigate to: ${page}`);
  };

  return (
    <nav style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <ResponsiveComponent component={Button}>
        <div width={0}>
          <IconButton
            icon={<Icon name="AddFilled" />}
            onClick={() => handleNavigation('home')}
            title="Home"
          />
        </div>
        
        <div width={768}>
          <Button
            size="Small"
            type="Ghost"
            onClick={() => handleNavigation('home')}
          >
            Home
          </Button>
        </div>
        
        <div width={1024}>
          <Button
            size="Medium"
            type="Ghost"
            leadingIcon={<Icon name="AddFilled" />}
            onClick={() => handleNavigation('home')}
          >
            Home
          </Button>
        </div>
      </ResponsiveComponent>

      <ResponsiveComponent component={Button}>
        <div width={0}>
          <IconButton
            icon={<Icon name="SearchFilled" />}
            onClick={() => handleNavigation('about')}
            title="About"
          />
        </div>
        
        <div width={768}>
          <Button
            size="Small"
            type="Ghost"
            onClick={() => handleNavigation('about')}
          >
            About
          </Button>
        </div>
        
        <div width={1024}>
          <Button
            size="Medium"
            type="Ghost"
            leadingIcon={<Icon name="SearchFilled" />}
            onClick={() => handleNavigation('about')}
          >
            About Us
          </Button>
        </div>
      </ResponsiveComponent>
    </nav>
  );
}
```

### Responsive Card Layout

```tsx
import { ResponsiveComponent, Button, Text } from '@delightui/components';

function ResponsiveCardExample() {
  return (
    <div style={{ 
      border: '1px solid #ccc', 
      borderRadius: '8px', 
      padding: '16px',
      maxWidth: '400px'
    }}>
      <Text weight="bold" style={{ marginBottom: '12px' }}>
        Product Card
      </Text>
      
      <Text size="small" color="secondary" style={{ marginBottom: '16px' }}>
        This is a responsive product card that adapts its button based on screen size.
      </Text>
      
      <ResponsiveComponent component={Button}>
        <div width={0}>
          <Button size="Small" style={{ width: '100%' }}>
            Buy
          </Button>
        </div>
        
        <div width={480}>
          <Button size="Medium" style={{ width: '100%' }}>
            Add to Cart
          </Button>
        </div>
        
        <div width={768}>
          <Button 
            size="Large" 
            leadingIcon={<Icon name="AddFilled" />}
            style={{ width: '100%' }}
          >
            Add to Cart
          </Button>
        </div>
      </ResponsiveComponent>
    </div>
  );
}
```

### Responsive Form Input

```tsx
import { ResponsiveComponent, Input, Button } from '@delightui/components';

function ResponsiveFormExample() {
  return (
    <form style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
      <div style={{ flex: 1 }}>
        <ResponsiveComponent component={Input}>
          <div width={0}>
            <Input
              placeholder="Search..."
              inputType="Text"
            />
          </div>
          
          <div width={768}>
            <Input
              placeholder="Enter your search query..."
              inputType="Text"
              leadingIcon={<Icon name="SearchFilled" />}
            />
          </div>
        </ResponsiveComponent>
      </div>
      
      <ResponsiveComponent component={Button}>
        <div width={0}>
          <IconButton
            icon={<Icon name="SearchFilled" />}
            type="submit"
          />
        </div>
        
        <div width={768}>
          <Button type="submit">
            Search
          </Button>
        </div>
      </ResponsiveComponent>
    </form>
  );
}
```

### Responsive Data Display

```tsx
import { ResponsiveComponent, Text, Chip } from '@delightui/components';

function ResponsiveDataDisplayExample() {
  const data = {
    title: 'Project Alpha',
    status: 'In Progress',
    priority: 'High',
    assignee: 'John Doe'
  };

  return (
    <div style={{ 
      border: '1px solid #ccc', 
      borderRadius: '8px', 
      padding: '16px',
      marginBottom: '16px'
    }}>
      <ResponsiveComponent component={Text}>
        <div width={0}>
          <Text weight="bold" size="medium">
            {data.title}
          </Text>
        </div>
        
        <div width={768}>
          <Text weight="bold" size="large">
            {data.title}
          </Text>
        </div>
      </ResponsiveComponent>
      
      <div style={{ marginTop: '8px', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
        <ResponsiveComponent component={Chip}>
          <div width={0}>
            <Chip size="Small" variant="outlined">
              {data.status}
            </Chip>
          </div>
          
          <div width={768}>
            <Chip size="Medium" variant="filled">
              Status: {data.status}
            </Chip>
          </div>
        </ResponsiveComponent>
        
        <ResponsiveComponent component={Chip}>
          <div width={0}>
            <Chip size="Small" variant="outlined" color="error">
              {data.priority}
            </Chip>
          </div>
          
          <div width={768}>
            <Chip size="Medium" variant="filled" color="error">
              Priority: {data.priority}
            </Chip>
          </div>
        </ResponsiveComponent>
      </div>
      
      <ResponsiveComponent component={Text}>
        <div width={0}>
          <Text size="small" color="secondary" style={{ marginTop: '8px' }}>
            {data.assignee}
          </Text>
        </div>
        
        <div width={768}>
          <Text size="small" color="secondary" style={{ marginTop: '8px' }}>
            Assigned to: {data.assignee}
          </Text>
        </div>
      </ResponsiveComponent>
    </div>
  );
}
```

### Responsive Modal Actions

```tsx
import { ResponsiveComponent, Button, Modal, ModalHeader, ModalFooter } from '@delightui/components';

function ResponsiveModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  const handleConfirm = () => {
    console.log('Confirmed');
    setIsOpen(false);
  };

  const handleCancel = () => {
    console.log('Cancelled');
    setIsOpen(false);
  };

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>
        Open Responsive Modal
      </Button>
      
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <ModalHeader>
          Confirm Action
        </ModalHeader>
        
        <div style={{ padding: '16px' }}>
          <Text>Are you sure you want to proceed with this action?</Text>
        </div>
        
        <ModalFooter>
          <ResponsiveComponent component={Button}>
            <div width={0}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
                <Button
                  onClick={handleConfirm}
                  style={{ width: '100%' }}
                >
                  Confirm
                </Button>
                <Button
                  type="Outlined"
                  onClick={handleCancel}
                  style={{ width: '100%' }}
                >
                  Cancel
                </Button>
              </div>
            </div>
            
            <div width={768}>
              <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                <Button
                  type="Outlined"
                  onClick={handleCancel}
                >
                  Cancel
                </Button>
                <Button
                  onClick={handleConfirm}
                >
                  Confirm
                </Button>
              </div>
            </div>
          </ResponsiveComponent>
        </ModalFooter>
      </Modal>
    </div>
  );
}
```

### Responsive Icon Display

```tsx
import { ResponsiveComponent, IconButton, Button, Icon } from '@delightui/components';

function ResponsiveIconExample() {
  const actions = [
    { id: 'save', icon: 'CheckFilled', label: 'Save' },
    { id: 'edit', icon: 'InfoFilled', label: 'Edit' },
    { id: 'delete', icon: 'CloseDeleteOutlined', label: 'Delete' }
  ];

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {actions.map((action) => (
        <ResponsiveComponent key={action.id} component={Button}>
          <div width={0}>
            <IconButton
              icon={<Icon name={action.icon} />}
              onClick={() => console.log(`${action.label} clicked`)}
              title={action.label}
            />
          </div>
          
          <div width={768}>
            <Button
              size="Small"
              type="Outlined"
              leadingIcon={<Icon name={action.icon} />}
              onClick={() => console.log(`${action.label} clicked`)}
            >
              {action.label}
            </Button>
          </div>
        </ResponsiveComponent>
      ))}
    </div>
  );
}
```

### Complex Responsive Layout

```tsx
import { ResponsiveComponent, Button, Text, Input, IconButton, Icon } from '@delightui/components';

function ComplexResponsiveExample() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div style={{ 
      border: '1px solid #ccc', 
      borderRadius: '8px', 
      padding: '16px'
    }}>
      <ResponsiveComponent component={Text}>
        <div width={0}>
          <Text weight="bold" size="large" style={{ marginBottom: '16px' }}>
            Search
          </Text>
        </div>
        
        <div width={768}>
          <Text weight="bold" size="xlarge" style={{ marginBottom: '20px' }}>
            Advanced Search
          </Text>
        </div>
      </ResponsiveComponent>
      
      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        <ResponsiveComponent component={Input}>
          <div width={0}>
            <Input
              value={searchTerm}
              onValueChange={setSearchTerm}
              placeholder="Search..."
              style={{ flex: 1 }}
            />
          </div>
          
          <div width={768}>
            <Input
              value={searchTerm}
              onValueChange={setSearchTerm}
              placeholder="Enter your search query..."
              leadingIcon={<Icon name="SearchFilled" />}
              style={{ flex: 1 }}
            />
          </div>
        </ResponsiveComponent>
        
        <ResponsiveComponent component={Button}>
          <div width={0}>
            <IconButton
              icon={<Icon name="SearchFilled" />}
              onClick={() => console.log('Search:', searchTerm)}
            />
          </div>
          
          <div width={768}>
            <Button
              onClick={() => console.log('Search:', searchTerm)}
              leadingIcon={<Icon name="SearchFilled" />}
            >
              Search
            </Button>
          </div>
        </ResponsiveComponent>
      </div>
      
      <ResponsiveComponent component={Button}>
        <div width={0}>
          <Button
            size="Small"
            type="Ghost"
            style={{ width: '100%' }}
            onClick={() => console.log('Advanced options')}
          >
            More Options
          </Button>
        </div>
        
        <div width={768}>
          <div style={{ display: 'flex', gap: '8px' }}>
            <Button
              type="Ghost"
              onClick={() => console.log('Advanced filters')}
            >
              Advanced Filters
            </Button>
            <Button
              type="Ghost"
              onClick={() => console.log('Saved searches')}
            >
              Saved Searches
            </Button>
          </div>
        </div>
      </ResponsiveComponent>
    </div>
  );
}
```

### Custom Breakpoints

```tsx
import { ResponsiveComponent, Button } from '@delightui/components';

function CustomBreakpointsExample() {
  return (
    <ResponsiveComponent component={Button}>
      {/* Extra small devices (phones) */}
      <div width={0}>
        <Button size="Small" type="Filled" style={{ width: '100%' }}>
          XS
        </Button>
      </div>
      
      {/* Small devices (landscape phones) */}
      <div width={576}>
        <Button size="Medium" type="Filled" style={{ width: '100%' }}>
          SM
        </Button>
      </div>
      
      {/* Medium devices (tablets) */}
      <div width={768}>
        <Button size="Medium" type="Outlined">
          MD
        </Button>
      </div>
      
      {/* Large devices (desktops) */}
      <div width={992}>
        <Button size="Large" type="Outlined">
          LG
        </Button>
      </div>
      
      {/* Extra large devices (large desktops) */}
      <div width={1200}>
        <Button size="Large" type="Ghost">
          XL
        </Button>
      </div>
    </ResponsiveComponent>
  );
}
```