message: docs: Update Gallery example
diff: ```jsx
  - class Example extends React.Component {
  +const [slideIndex, setSlideIndex] = useState(0);
  +const [isDraggable, setIsDraggable] = useState(true);
  +const [showArrows, setShowArrows] = useState(true);
  - constructor (props) {
  -
  - super(props);
  -
  - this.state = {
  - slideIndex: 0,
  - isDraggable: true,
  - showArrows: true,
  - }
  - }
  -
  - render () {
  - const { isDraggable, showArrows, slideIndex } = this.state
  - return (
  <View activePanel="gallery">
  - <Panel id="gallery">
  + <Panel nav="gallery">
  <PanelHeader>Gallery</PanelHeader>
  <Group header={<Header mode="secondary">Sticks right</Header>}>
  <Gallery
  slideWidth="90%"
  bullets="dark"
  >
  - <div style={{ height: 150, backgroundColor: 'var(--destructive)' }} />
  - <div style={{ height: 120, backgroundColor: 'var(--button_commerce_background)' }} />
  + <div style={{ backgroundColor: 'var(--destructive)' }} />
  + <img src="https://picsum.photos/1024/640" style={{ display: 'block'}} />
  <div style={{ backgroundColor: 'var(--accent)' }} />
  </Gallery>
  </Group>
  <Gallery
  slideWidth="90%"
  align="right"
  - style={{ height: 150 }}
  >
  - <div style={{ backgroundColor: 'var(--destructive)' }} />
  + <div style={{ height: 150, backgroundColor: 'var(--destructive)' }} />
  <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
  <div style={{ backgroundColor: 'var(--accent)' }} />
  </Gallery>
  <Gallery
  slideWidth="90%"
  align="center"
  - style={{ height: 150 }}
  >
  <div style={{ backgroundColor: 'var(--destructive)' }} />
  <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
  align="center"
  style={{ height: 150 }}
  slideIndex={slideIndex}
  - onChange={slideIndex => this.setState({slideIndex})}
  + onChange={setSlideIndex}
  isDraggable={isDraggable}
  showArrows={showArrows}
  >
  </Gallery>
  <FormItem>
  - <Checkbox checked={isDraggable} onChange={e => this.setState({ isDraggable: e.target.checked })}>
  + <Checkbox checked={isDraggable} onChange={e => setIsDraggable(e.target.checked)}>
  isDraggable
  </Checkbox>
  - <Checkbox checked={showArrows} onChange={e => this.setState({ showArrows: e.target.checked })}>
  + <Checkbox checked={showArrows} onChange={e => setShowArrows(e.target.checked)}>
  showArrows
  </Checkbox>
  </FormItem>
  <FormItem>
  - <Button size='l' stretched onClick={() => this.setState({ slideIndex: (slideIndex + 1) % 3 })}>
  + <Button size='l' stretched onClick={() => setSlideIndex((slideIndex + 1) % 3)}>
  Next slide
  </Button>
  </FormItem>
  </Group>
  </Panel>
  </View>
  - )
  - }
  - }
  -
  - <Example />
  ```
  