import { Meta } from '@storybook/addon-docs/blocks';
import CrossedOutEyes from '../motion-icons/emojis/CrossedOutEyes';

<Meta
  title="Design System/Icons/Motion Icons"
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

# Motion Icons

Animated icons powered by [Lottie](https://airbnb.io/lottie/), exported as ready-to-use React components.

## Usage

```tsx
import CrossedOutEyes from '@material-hu/motion-icons/emojis/CrossedOutEyes';

function MyComponent() {
  return <CrossedOutEyes />;
}
```

All motion icon components accept the following props:

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>loop</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code></td>
      <td>Whether the animation loops</td>
    </tr>
    <tr>
      <td><code>autoplay</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code></td>
      <td>Whether the animation starts automatically</td>
    </tr>
    <tr>
      <td><code>color</code></td>
      <td><code>string</code></td>
      <td>—</td>
      <td>Override color for the icon</td>
    </tr>
    <tr>
      <td><code>style</code></td>
      <td><code>CSSProperties</code></td>
      <td><code>{'{ width: 64, height: 64 }'}</code></td>
      <td>CSS styles for the container. Defaults to 64×64px; pass your own <code>width</code> / <code>height</code> to override</td>
    </tr>
    <tr>
      <td><code>onComplete</code></td>
      <td><code>() => void</code></td>
      <td>—</td>
      <td>Callback when the animation completes (non-looping)</td>
    </tr>
  </tbody>
</table>

## Emojis

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
    gap: '1rem',
  }}
>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      padding: '1rem',
      gap: '1rem',
      border: '1px solid #eee',
      borderRadius: '4px',
    }}
  >
    <CrossedOutEyes />
    <span>
      <pre style={{ fontSize: '0.75rem' }}>CrossedOutEyes</pre>
    </span>
  </div>
</div>