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

export const borderRadius = [
  {
    name: "$neeto-ui-rounded-none",
    value: "0",
    compiledValue: "0",
  },
  {
    name: "$neeto-ui-rounded-sm",
    value: "3px",
    compiledValue: "3px",
  },
  {
    name: "$neeto-ui-rounded",
    value: "5px",
    compiledValue: "5px",
  },
  {
    name: "$neeto-ui-rounded-md",
    value: "6px",
    compiledValue: "6px",
  },
  {
    name: "$neeto-ui-rounded-lg",
    value: "8px",
    compiledValue: "8px",
  },
  {
    name: "$neeto-ui-rounded-xl",
    value: "12px",
    compiledValue: "12px",
  },
  {
    name: "$neeto-ui-rounded-full",
    value: "999px",
    compiledValue: "999px",
  },
];

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

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

# Border Radius

<table className="story-demo-table">
  <thead>
    <tr>
      <td>Preview</td>
      <td>CSS Variable</td>
      <td>Class</td>
    </tr>
  </thead>
  <tbody>
    {borderRadius.map((radius) => {
      return (
        <tr key={radius.name}>
          <td className="neeto-ui-bg-gray-800">
            <div className="p-6">
              <div
                className={`w-20 h-20 flex items-center justify-center neeto-ui-bg-white neeto-ui-text-black ${radius.name.replace(
                  "$neeto-ui",
                  "neeto-ui"
                )}`}
              >
                {radius.compiledValue}
              </div>
            </div>
          </td>
          <td>
            <code>{`${radius.name.replace("$neeto-ui", "--neeto-ui")}`}</code>
          </td>
          <td>
            <div className="flex justify-between">
              <code>{`${radius.name.replace("$neeto-ui", "neeto-ui")}`}</code>
            </div>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>
