import { Typography } from '../common/propsValues/typography';

import Title from './Title';

export default {
  component: Title,
  title: 'Typography/Title',
};

export const Basic = () => {
  return (
    <>
      <Title type={Typography.TITLE_SCREEN}>Screen Title</Title>
      <Title type={Typography.TITLE_SECTION} className="m-t-3">
        Section Title
      </Title>
      <Title type={Typography.TITLE_SUBSECTION} className="m-t-3">
        Subsection Title
      </Title>
      <Title type={Typography.TITLE_BODY} className="m-t-3">
        Body Title
      </Title>
      <Title type={Typography.TITLE_GROUP} className="m-t-3">
        Group Title
      </Title>
    </>
  );
};