@prezly/theme-kit-ui/build/stories/_components/ColorPalette.mjs

UI components for Prezly themes

import React from "react";
import { twMerge } from 'tailwind-merge';
import { ColorSwatch } from "./ColorSwatch.mjs";
export function ColorPalette(_ref) {
  var {
    title,
    description,
    colors
  } = _ref;
  return /*#__PURE__*/React.createElement("div", {
    className: twMerge('mt-16', 'sb-unstyled')
  }, /*#__PURE__*/React.createElement("h3", {
    className: "text-base leading-6 font-medium text-gray-500 mb-2"
  }, title), description && /*#__PURE__*/React.createElement("h4", {
    className: "mb-5 text-sm leading-5 text-gray-500"
  }, description), /*#__PURE__*/React.createElement("div", {
    className: "grid gap-x-6 gap-y-10 grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
  }, colors.map(_ref2 => {
    var {
      name,
      hex
    } = _ref2;
    return /*#__PURE__*/React.createElement(ColorSwatch, {
      key: hex,
      value: name,
      hex: hex
    });
  })));
}