import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Grid from './';
import Cell from './Cell';
import { Child } from './Grid.stories';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';
import * as GridStories from './Grid.stories.tsx';

<Meta of={GridStories} />

# Grid

The Grid component adapts to screen size and orientation, ensuring consistency across layouts.

## Importing

```javascript
import { Grid } from 'amazon-chime-sdk-component-library-react';
```

## Example

### Basic Grid

You can place children components based on grid props, e.g. `gridGap`, `gridTemplateRows`, `gridTemplateColumns`, `responsive`, etc.

<ThemeProvider theme={lightTheme}>
  <GlobalStyles/>
  <Canvas>
    <Grid
      style={{ height: '30vh' }}
      responsive
      gridGap=".5rem"
      gridTemplateColumns="1fr 1fr 4fr"
      gridTemplateRows="auto"
      gridAutoFlow=""
    >
      <Child>Child</Child>
      <Child>Child</Child>
      <Child>Child</Child>
      <Child>Child</Child>
      <Child>Child</Child>
      <Child>Child</Child>
    </Grid>
  </Canvas>
</ThemeProvider>

```jsx
<Grid
  style={{ height: '30vh' }}
  responsive
  gridGap=".5rem"
  gridTemplateColumns="1fr 1fr 4fr"
  gridTemplateRows="auto"
  gridAutoFlow=""
>
  <Child>Child</Child>
  <Child>Child</Child>
  <Child>Child</Child>
  <Child>Child</Child>
  <Child>Child</Child>
  <Child>Child</Child>
</Grid>
```

### Named Areas Grid

First, you define names of your choice on grid items with the `gridArea` property.

Then, on the grid container, you can use the `gridTemplateAreas` property to define how to place named areas.

<ThemeProvider theme={lightTheme}>
  <GlobalStyles/>
  <Canvas>
    <Grid
      style={{ height: '30vh' }}
      gridGap=".25rem"
      gridAutoFlow=""
      gridTemplateColumns="1fr 1fr 1fr"
      gridTemplateRows="50px 100px 50px"
      gridTemplateAreas='
        "sidebar main other"
        "sidebar main other"
        "footer footer footer"
      '
    >
      <Cell gridArea="footer">
        <Child >footer</Child>
      </Cell>
      <Cell gridArea="sidebar">
        <Child>SideBar</Child>
      </Cell>
      <Cell gridArea="main">
        <Child>Main</Child>
      </Cell>
      <Child>Other</Child>
      <Child>Other</Child>
    </Grid>
  </Canvas>
</ThemeProvider>

```jsx
<Grid
  style={{ height: '30vh' }}
  gridGap=".25rem"
  gridAutoFlow=""
  gridTemplateColumns="1fr 1fr 1fr"
  gridTemplateRows="50px 100px 50px"
  gridTemplateAreas='
    "sidebar main other"
    "sidebar main other"
    "footer footer footer"
  '
>
  <Cell gridArea="footer">
    <Child >footer</Child>
  </Cell>
  <Cell gridArea="sidebar">
    <Child>SideBar</Child>
  </Cell>
  <Cell gridArea="main">
    <Child>Main</Child>
  </Cell>
  <Child>Other</Child>
  <Child>Other</Child>
</Grid>
```

## Props

<ArgTypes of={Grid} />