import { useState } from 'react'
import Div from '../Div'
import Span from '../typography/Span'
import Br from '../Br'
import Row from '../Row'
import { Sandbox } from '@startupjs/docs'

# Div

Div is a wrapper for a group of components, which can be clickable when getting the property `onPress`.

```jsx
import { Div } from '@startupjs/ui'
```

## Example

```jsx example
const divStyle = {
  width: 150,
  height: 100,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
const [counter, setCounter] = useState(0)
return (
  <Div>
    <Div style={divStyle}>
      <Span>Not clickable</Span>
    </Div>
    <Br />
    <Div
      style={divStyle}
      onPress={() => setCounter(counter + 1)}
    >
      <Span>Clicked {counter} times</Span>
    </Div>
  </Div>
)
```

## Multiple Div in a Row

When multiple Div(s) are used in a [`Row`](/docs/en/components/Row) spacing between them can be adjusted using `pushed` prop to specify indent from the previous Div. Possible values of `pushed` prop can be found in the `Sandbox` section at the bottom of the page. The `true` value of prop is equivalent to `m` value.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
return (
  <Row>
    <Div style={divStyle}>
      <Span>Div 1</Span>
    </Div>
    <Div pushed='xs' style={divStyle}>
      <Span>Div 2</Span>
    </Div>
    <Div pushed='s' style={divStyle}>
      <Span>Div 3</Span>
    </Div>
    <Div pushed style={divStyle}>
      <Span>Div 4</Span>
    </Div>
  </Row>
)
```

## Different clickable states

There are two clickable variants of component, controlled by `variant` property.

`opacity` variant - on press down, opacity of the component is decreased.

`highlight` variant - on press down, the opacity of the component background  is decreased.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
return (
  <Row>
    <Div style={divStyle} onPress={() => {}}>
      <Span>Div opacity variant</Span>
    </Div>
    <Div style={divStyle} variant='highlight' pushed onPress={() => {}}>
      <Span>Div highlight variant</Span>
    </Div>
  </Row>
)
```

## Levels of emphasis

Div `level` property determines different levels of emphasis by adding shadow to component. Possible values of `level` prop can be found in the `Sandbox` section at the bottom of the page.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: 'center',
  justifyContent: 'center'
}
return (
  <Row>
    <Div style={divStyle} level={1}>
      <Span>Div level 1</Span>
    </Div>
    <Div style={divStyle} level={4} pushed>
      <Span>Div level 4</Span>
    </Div>
  </Row>
)
```

## Sandbox

<Sandbox Component={Div} />