import * as React from 'react';

export const Forward = (children: any) => (
  <React.Fragment>
    {children}
    <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20.4'>
      <polyline className='switch-arrow-elements one' points='0.8,19.7 10.4,10.2 0.8,0.7 '/>
      <polyline className='switch-arrow-elements two' points='0.8,19.7 10.4,10.2 0.8,0.7 '/>
    </svg>
  </React.Fragment>
);

export const Backward = (children: any) => (
  <React.Fragment>
    <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20.4'>
      <polyline className='switch-arrow-elements one' points='0.8,19.7 10.4,10.2 0.8,0.7 '/>
      <polyline className='switch-arrow-elements two' points='0.8,19.7 10.4,10.2 0.8,0.7 '/>
    </svg>
    {children}
  </React.Fragment>
);

export const ArrowPlus = (children: any) => (
  <React.Fragment>
    {children}
    <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20.42'>
      <polyline className='link-arrow-elements' points='12.35 19.71 22 10.22 12.35 0.71'/>
      <line className='link-arrow-elements' x1='22' y1='10.22' y2='10.22'/>
    </svg>
  </React.Fragment>
);

export const Download = (children: any) => (
  <React.Fragment>
    {children}
    <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20.42' transform='rotate(90)'>
      <polyline className='link-arrow-elements' points='12.35 19.71 22 10.22 12.35 0.71'/>
      <line className='link-arrow-elements' x1='22' y1='10.22' y2='10.22'/>
      <line className='link-arrow-elements' x1='24' x2='24' y1='24'/>
    </svg>
  </React.Fragment>
);

export const Plus = (children: any) => (
  <React.Fragment>
    {children}
    <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20.4'>
      <polyline className='plus br' points='19,10.2 11,10.2 11,18.2 '/>
      <polyline className='plus bl' points='11,18.2 11,10.2 3,10.2 '/>
      <polyline className='plus tr' points='11,2.2 11,10.2 19,10.2 '/>
      <polyline className='plus tl' points='3,10.2 11,10.2 11,2.2 '/>
    </svg>
  </React.Fragment>
);