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

export const argTypes = {
  component: DateRange,
  title: 'Components/DateRange',
};

<Meta
  title="Components/DateRange"
  component={DateRange}
/>

export const DateRangeTemplate = args => (
  <div className="h-96">
    <DateRange {...args} />
  </div>
);

<Heading
  title="DateRange"
  componentRelativePath="DateRange/DateRange.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

DateRange is a component that allows you to select a range of dates.

<Canvas>
  <Story
    name="Overview"
    args={{
      id: 'date-range-1',
      startDate: '1990-05-01',
      endDate: '2022-01-01',
    }}
  >
    {DateRangeTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={DateRange} />

## Contribute

<Footer componentRelativePath="DateRange/__stories__/dateRange.stories.mdx" />
