import { Timeline, Paper, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
import React from 'react'

const items = Array.from({ length: 3 })

const TimelineBase = ({ size }: Omit<TimelineProps, 'children'>) => {
  return (
    <Timeline size={size}>
      {items.map((_, index) => (
        <TimelineItem content={index + 1} key={index}>
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
      ))}
    </Timeline>
  )
}
export const TimelineSize = () => {
  return (
    <>
      <TimelineBase size="1" />
      <TimelineBase size="2" />
      <TimelineBase size="3" />
      <TimelineBase size="4" />
      <TimelineBase size="5" />
      <TimelineBase size="6" />
      <TimelineBase size="7" />
      <TimelineBase size="8" />
      <TimelineBase size="9" />
    </>
  )
}

import { Timeline, TimelineProps, Heading, Text, TimelineItem, Paper } from '@pillar-ui/core'
import React from 'react'

const items = Array.from({ length: 3 })

const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
  return (
    <Timeline {...props}>
      {items.map((_, index) => (
        <TimelineItem content={index + 1} {...props} key={index}>
          <Paper flow="2">
            <Heading size="5">Hello</Heading>
            <Text as="time" color="b" low size="3">
              13 May 2021
            </Text>
            <Text size="3">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
              Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
              Nihil, quae.
            </Text>
          </Paper>
        </TimelineItem>
      ))}
    </Timeline>
  )
}
export const TimelineColor = () => {
  return (
    <>
      <TimelineBase color="b" />
      <TimelineBase color="se" />
      <TimelineBase color="p" />
      <TimelineBase color="su" />
      <TimelineBase color="d" />
      <TimelineBase color="w" />
      <TimelineBase color="i" />
    </>
  )
}

import { Timeline, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
import React from 'react'

const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
  return (
    <Timeline {...props}>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
    </Timeline>
  )
}

export const TimelineCorner = () => {
  return (
    <>
      <TimelineBase corner="0" />
      <TimelineBase corner="1" />
      <TimelineBase corner="2" />
      <TimelineBase corner="3" />
      <TimelineBase corner="4" />
      <TimelineBase corner="5" />
      <TimelineBase corner="full" />
    </>
  )
}

import { Timeline, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
import React from 'react'

const items = Array.from({ length: 3 })

const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
  return (
    <Timeline>
      {items.map((_, index) => (
        <TimelineItem content={index + 1} {...props} key={index}>
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
      ))}
    </Timeline>
  )
}

export const TimelineVariant = () => {
  return (
    <>
      <TimelineBase color="i" variant="shadow" />
      <TimelineBase color="i" variant="solid" />
      <TimelineBase color="i" variant="mixed" />
      <TimelineBase color="i" variant="soft" />
      <TimelineBase color="i" variant="outline" />
    </>
  )
}

import { Timeline, Paper, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
import React from 'react'

const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
  return (
    <Timeline {...props}>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
      <TimelineItem>
        <Heading size="3">Hello</Heading>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </TimelineItem>
    </Timeline>
  )
}

export const TimelineLine = () => {
  return (
    <>
      <TimelineBase line="solid" />
      <TimelineBase line="dashed" />
      <TimelineBase line="dotted" />
      <Timeline>
        <TimelineItem line="solid">
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
        <TimelineItem line="dashed">
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
        <TimelineItem line="dotted">
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
        <TimelineItem>
          <Heading size="3">Hello</Heading>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
            Nihil, quae.
          </Text>
        </TimelineItem>
      </Timeline>
    </>
  )
}

import { Timeline, TimelineProps, Heading, Text, Avatar, TimelineItem, Alert, Paper } from '@pillar-ui/core'
import { Cross, Pencil, UserInfo, X } from '@pillar-ui/icons'
import React from 'react'

const Item = (props: any) => {
  return (
    <TimelineItem className="Sf-3" {...props}>
      <Paper flow="4">
        <Heading size="3">Nice to Meet You</Heading>
        <Alert
          title="helllo world"
          message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad. Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil, quae."
        />
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
          quae.
        </Text>
      </Paper>
    </TimelineItem>
  )
}

export const TimelineContent = () => {
  return (
    <>
      <Timeline>
        <Item content="1" />
        <Item content="2" />
        <Item content="3" />
      </Timeline>

      <Timeline>
        <Item content="A" />
        <Item content="B" />
        <Item content="C" />
      </Timeline>
      <Timeline>
        <Item content={<X />} />
        <Item content={<Pencil />} />
        <Item content={<UserInfo />} />
      </Timeline>
    </>
  )
}