import { Meta, Story } from "@storybook/addon-docs";

<Meta
  title="Foundation/Helpers/Font size"
  parameters={{
    viewMode: "docs",
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<style>
  {`
  .story-demo-table tr{
      background: transparent !important;
  }

  `}
</style>

# Font size

export const fontSizeHelpers = [
  {
    name: "$neeto-ui-text-3xl",
    value: "h1",
    compiledValue: "h1",
  },
  {
    name: "$neeto-ui-text-2xl",
    value: "h2",
    compiledValue: "h2",
  },
  {
    name: "$neeto-ui-text-xl",
    value: "h3",
    compiledValue: "h3",
  },
  {
    name: "$neeto-ui-text-base",
    value: "h4",
    compiledValue: "h4",
  },
  {
    name: "$neeto-ui-text-sm",
    value: "h5",
    compiledValue: "h5",
  },
  {
    name: "$neeto-ui-text-xs",
    value: "h6",
    compiledValue: "h6",
  },
  {
    name: "$neeto-ui-text-base",
    value: "body1",
    compiledValue: "body1",
  },
  {
    name: "$neeto-ui-text-sm",
    value: "body2",
    compiledValue: "body2",
  },
  {
    name: "$neeto-ui-text-xs",
    value: "body3",
    compiledValue: "body3",
  },
  {
    name: "$neeto-ui-text-xxs",
    value: "nano",
    compiledValue: "nano",
  },
  {
    name: "$neeto-ui-text-xxs",
    value: "xxs",
    compiledValue: "xxs",
  },
  {
    name: "$neeto-ui-text-xs",
    value: "xs",
    compiledValue: "xs",
  },
  {
    name: "$neeto-ui-text-sm",
    value: "sm",
    compiledValue: "sm",
  },
  {
    name: "$neeto-ui-text-base",
    value: "base",
    compiledValue: "base",
  },
  {
    name: "$neeto-ui-text-lg",
    value: "lg",
    compiledValue: "lg",
  },
  {
    name: "$neeto-ui-text-xl",
    value: "xl",
    compiledValue: "xl",
  },
  {
    name: "$neeto-ui-text-2xl",
    value: "2xl",
    compiledValue: "2xl",
  },
  {
    name: "$neeto-ui-text-3xl",
    value: "3xl",
    compiledValue: "3xl",
  },
  {
    name: "$neeto-ui-text-4xl",
    value: "4xl",
    compiledValue: "4xl",
  },
];

<table className="table-auto">
  <thead>
    <tr>
      <td className="border p-2">Preview</td>
      <td className="border p-2">CSS Variable</td>
      <td className="border p-2">Class</td>
    </tr>
  </thead>
  <tbody>
    {fontSizeHelpers.map((helper) => {
      return (
        <tr key={helper.name}>
          <td className="neeto-ui-bg-gray-800 p-2">
            <div className="p-6">
              <div
                className={`w-46 h-18 flex items-center justify-center p-3 rounded-sm neeto-ui-bg-white neeto-ui-text-black ${helper.name.replace(
                  "$neeto-ui",
                  "neeto-ui"
                )}`}
              >
                {helper.compiledValue}
              </div>
            </div>
          </td>
          <td className="border p-2">
            <code>{`${helper.name.replace("$neeto-ui", "--neeto-ui")}`}</code>
          </td>
          <td className="border p-2">
            <div className="flex justify-between">
              <code>{`${helper.name.replace("$neeto-ui", "neeto-ui")}`}</code>
            </div>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>
