import { Meta } from '@storybook/blocks';

export const RightArrow = () => (
  <svg
    viewBox='0 0 14 14'
    width='8px'
    height='14px'
    style={{
      marginLeft: '4px',
      display: 'inline-block',
      shapeRendering: 'inherit',
      verticalAlign: 'middle',
      fill: 'currentColor',
      'path fill': 'currentColor',
    }}
  >
    <path d='m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z' />
  </svg>
);

<Meta title='Welcome' />
<p>Music Loopy</p>
<p>This is a component library for the music loopy platform.</p>
<p>To get started, run the following commands:</p>
<ul>
  <li>
    <code>npm i</code>
  </li>
  <li>
    <code>npm run storybook</code>
  </li>
</ul>
<p>
  This will start the storybook server, where you can view all the components in
  the library.
</p>
<p>
  To use the components in your project, you can install the library from npm:{' '}
  <code>npm i @music-loopy/components</code>
</p>