import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import DatePicker from '../DatePicker';
import DateRange from '../DateRange';
import { useState } from 'react';

<Meta
  title="Components/Date/Introducion"
  component={DatePicker}
  decorators={[(storyFn) => <div>{storyFn()}</div>]}
  parameters={{
    layout: 'centered',
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

# Date

This is the showcase of the Date Collection of ocean design.

## Date picker

The date picker is the version of date collection with one field.

### Simple Usage

<div
  style={{
    width: '100%',
    display: 'flex',
    margin: '30px 0 40px',
  }}
>
  <div style={{ width: '400px', zIndex: '10' }}>
    <DatePicker label="Your label" value="" onSelect={() => null} />
  </div>
</div>

#### code

```jsx
<DatePicker label="Your label" value="" onSelect={() => null} />
```

## Date range

The date picker is the version of date collection to select a range of dates.

### Simple Usage

<div
  style={{
    width: '100%',
    display: 'flex',
    margin: '40px 0 30px',
  }}
>
  <div style={{ width: '400px', zIndex: '10' }}>
    <DateRange
      labels={{ from: 'Start date', to: 'End date' }}
      values={{ from: '', to: '' }}
      onSelect={() => null}
    />
  </div>
</div>

#### code

```jsx
<DatePicker
  labels={{ from: 'Start-date', to: 'End-date' }}
  values={{ from: '', to: '' }}
  onSelect={() => null}
/>
```
