import React from 'react';
import { Meta } from '@storybook/react';
import Placeholder from '../components/Placeholder';
import icons from '../components/configs/icons';

export default {
  title: 'Utils / Icons',
  component: Placeholder,
} as Meta;

export const Icons = () => (
  <section className="grid grid-cols-5">
    {Object.entries(icons).map(([key, value]) => (
      <div className="text-center mb-5">
        <i className={`${value} text-5xl mb-1`} />
        <span className="flex flex-col">
          <span className="text-sm">{`${key}:`}</span>
          <span className="text-sm">{`${value}`}</span>
        </span>
      </div>
    ))}
  </section>
);