@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDCardSectional.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState } from "react";
import HUDHolographicBorder from "./HUDHolographicBorder.js";
import HUDIcon from "./HUDIcon.js";
var baseSectionConfigurationSettings = {
  container: {
    borderRadius: "1rem",
    margin: "15px",
    padding: "20px",
    background: "linear-gradient(135deg, #2A2A2A, #3E3E3E)",
    boxShadow: "0 6px 12px rgba(0, 0, 0, 0.2)",
    color: "#E0E0E0",
    fontFamily: "Segoe UI, sans-serif"
  },
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    borderBottom: "1px solid #444",
    paddingBottom: "15px"
  },
  button: {
    padding: "8px 18px",
    cursor: "pointer",
    border: "none",
    borderRadius: "6px",
    background: "transparent",
    color: "#FFF",
    fontSize: "16px",
    transition: "background 0.3s, transform 0.3s",
    marginLeft: "1rem"
  },
  buttonHover: {
    background: "#434190",
    transform: "scale(1.05)"
  },
  content: {
    marginTop: "15px",
    transition: "height 0.3s ease"
  },
  footer: {
    marginTop: "15px",
    borderTop: "1px solid #444",
    paddingTop: "15px"
  }
};
function HUDCardSectional(hudCardSectionalConfigurationSettings) {
  var _hudCardSectionalConf = hudCardSectionalConfigurationSettings.holographicBorderConfigurations,
    holographicBorderConfigurations = _hudCardSectionalConf === void 0 ? {} : _hudCardSectionalConf,
    _hudCardSectionalConf2 = hudCardSectionalConfigurationSettings.containerConfigurationSettings,
    containerConfigurationSettings = _hudCardSectionalConf2 === void 0 ? {} : _hudCardSectionalConf2,
    _hudCardSectionalConf3 = hudCardSectionalConfigurationSettings.headerConfigurationSettings,
    headerConfigurationSettings = _hudCardSectionalConf3 === void 0 ? {} : _hudCardSectionalConf3,
    _hudCardSectionalConf4 = hudCardSectionalConfigurationSettings.buttonConfigurationSettings,
    buttonConfigurationSettings = _hudCardSectionalConf4 === void 0 ? {} : _hudCardSectionalConf4,
    _hudCardSectionalConf5 = hudCardSectionalConfigurationSettings.buttonHoverConfigurationSettings,
    buttonHoverConfigurationSettings = _hudCardSectionalConf5 === void 0 ? {} : _hudCardSectionalConf5,
    _hudCardSectionalConf6 = hudCardSectionalConfigurationSettings.contentConfigurationSettings,
    contentConfigurationSettings = _hudCardSectionalConf6 === void 0 ? {} : _hudCardSectionalConf6,
    _hudCardSectionalConf7 = hudCardSectionalConfigurationSettings.footerConfigurationSettings,
    footerConfigurationSettings = _hudCardSectionalConf7 === void 0 ? {} : _hudCardSectionalConf7,
    _hudCardSectionalConf8 = hudCardSectionalConfigurationSettings.holographicBorderColor,
    holographicBorderColor = _hudCardSectionalConf8 === void 0 ? "rgba(0, 227.69, 247.69, 0.869)" : _hudCardSectionalConf8,
    _hudCardSectionalConf9 = hudCardSectionalConfigurationSettings.hologramLoadingBorder,
    hologramLoadingBorder = _hudCardSectionalConf9 === void 0 ? false : _hudCardSectionalConf9,
    _hudCardSectionalConf10 = hudCardSectionalConfigurationSettings.holographicBorderPadding,
    holographicBorderPadding = _hudCardSectionalConf10 === void 0 ? 2 : _hudCardSectionalConf10,
    _hudCardSectionalConf11 = hudCardSectionalConfigurationSettings.holographicBorderRadius,
    holographicBorderRadius = _hudCardSectionalConf11 === void 0 ? 10 : _hudCardSectionalConf11,
    _hudCardSectionalConf12 = hudCardSectionalConfigurationSettings.holographicBorderWidth,
    holographicBorderWidth = _hudCardSectionalConf12 === void 0 ? 5 : _hudCardSectionalConf12,
    _hudCardSectionalConf13 = hudCardSectionalConfigurationSettings.borderLuminescent,
    borderLuminescent = _hudCardSectionalConf13 === void 0 ? true : _hudCardSectionalConf13,
    _hudCardSectionalConf14 = hudCardSectionalConfigurationSettings.showToggleButton,
    showToggleButton = _hudCardSectionalConf14 === void 0 ? true : _hudCardSectionalConf14,
    _hudCardSectionalConf15 = hudCardSectionalConfigurationSettings.spotlightBorder,
    spotlightBorder = _hudCardSectionalConf15 === void 0 ? true : _hudCardSectionalConf15,
    _hudCardSectionalConf16 = hudCardSectionalConfigurationSettings.loadContent,
    loadContent = _hudCardSectionalConf16 === void 0 ? true : _hudCardSectionalConf16,
    headerContent = hudCardSectionalConfigurationSettings.headerContent,
    footerContent = hudCardSectionalConfigurationSettings.footerContent,
    children = hudCardSectionalConfigurationSettings.children;
  var _useState = useState(loadContent),
    _useState2 = _slicedToArray(_useState, 2),
    contentVisible = _useState2[0],
    setContentVisible = _useState2[1];
  var mergedStyles = {
    container: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.container), containerConfigurationSettings),
    header: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.header), headerConfigurationSettings),
    button: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.button), {}, {
      transform: contentVisible ? "rotate(180deg)" : "rotate(0deg)"
    }, buttonConfigurationSettings),
    buttonHover: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.buttonHover), buttonHoverConfigurationSettings),
    content: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.content), contentConfigurationSettings),
    footer: _objectSpread(_objectSpread({}, baseSectionConfigurationSettings.footer), footerConfigurationSettings)
  };
  var handleToggle = function handleToggle() {
    setContentVisible(!contentVisible);
  };
  return /*#__PURE__*/React.createElement(HUDHolographicBorder, _extends({
    holographicBorderContainerConfigurationSettings: mergedStyles.container,
    hologramLoadingBorder: hologramLoadingBorder,
    borderColor: holographicBorderColor,
    spotlightBorder: spotlightBorder,
    borderRadius: holographicBorderRadius,
    borderWidth: holographicBorderWidth,
    padding: holographicBorderPadding,
    showBorder: borderLuminescent
  }, holographicBorderConfigurations), /*#__PURE__*/React.createElement("div", {
    style: mergedStyles.header
  }, /*#__PURE__*/React.createElement("div", null, headerContent), showToggleButton ? /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: mergedStyles.button,
    name: "fa-chevron-down",
    onClick: handleToggle
  }) : null), contentVisible && /*#__PURE__*/React.createElement("div", {
    style: mergedStyles.content
  }, children), /*#__PURE__*/React.createElement("div", {
    style: mergedStyles.footer
  }, footerContent));
}
export default HUDCardSectional;