@ichigo_san/graphing/dist/components/modals/ShapeSelectorModal.js

A lightweight UML-style diagram editor built with React Flow and Tailwind CSS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ShapeSelectorModal = ({
  isOpen,
  onSelect,
  onCancel
}) => {
  if (!isOpen) return null;
  const shapes = [{
    id: 'component',
    label: 'Rectangle',
    icon: '🔹',
    color: 'bg-blue-100 dark:bg-blue-900/30'
  }, {
    id: 'circle',
    label: 'Circle',
    icon: '⭕',
    color: 'bg-green-100 dark:bg-green-900/30'
  }, {
    id: 'diamond',
    label: 'Diamond',
    icon: '♦️',
    color: 'bg-red-100 dark:bg-red-900/30'
  }, {
    id: 'hexagon',
    label: 'Hexagon',
    icon: '⬢',
    color: 'bg-yellow-100 dark:bg-yellow-900/30'
  }, {
    id: 'triangle',
    label: 'Triangle',
    icon: '🔺',
    color: 'bg-orange-100 dark:bg-orange-900/30'
  }];
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 animate-fadeIn"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-slideIn"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "px-6 py-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
  }, /*#__PURE__*/_react.default.createElement("h3", {
    className: "text-lg font-semibold text-gray-800 dark:text-gray-100"
  }, "Select Shape")), /*#__PURE__*/_react.default.createElement("div", {
    className: "p-6"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid grid-cols-2 gap-4"
  }, shapes.map(shape => /*#__PURE__*/_react.default.createElement("div", {
    key: shape.id,
    className: `${shape.color} p-5 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer flex flex-col items-center gap-3 transition-all hover:-translate-y-1 hover:shadow-lg`,
    onClick: () => onSelect(shape.id)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "text-4xl"
  }, shape.icon), /*#__PURE__*/_react.default.createElement("div", {
    className: "font-medium text-gray-700 dark:text-gray-300"
  }, shape.label))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex justify-end"
  }, /*#__PURE__*/_react.default.createElement("button", {
    className: "px-4 py-2 bg-gray-500 text-white rounded-md font-medium hover:bg-gray-600 transition-all",
    onClick: onCancel
  }, "Cancel"))));
};
var _default = exports.default = ShapeSelectorModal;