@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDHologramContainer.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";
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, { useEffect } from "react";
var baseCardStyles = {
  position: "relative",
  display: "inline-block",
  overflow: "hidden",
  transition: "transform 0.369s ease, box-shadow 0.369s ease, backdrop-filter 0.369s",
  textAlign: "center",
  fontWeight: "bold",
  lineHeight: "1.5",
  fontSize: "1em",
  backdropFilter: "blur(6px) saturate(180%)",
  boxShadow: "0 8px 16px rgba(0, 150, 255, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.05)",
  borderRadius: "15px",
  background: "rgba(30, 30, 50, 0.2)",
  color: "#e0f7ff",
  maxWidth: "360px",
  padding: "20px"
};
var baseHoverStyles = {
  transform: "translateY(-3px) scale(1.01) rotateX(1deg) rotateY(1deg)",
  backdropFilter: "blur(8px) saturate(200%)",
  boxShadow: "0 10px 20px rgba(0, 200, 255, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.08)"
};
var animatedGradientBorderStyles = {
  position: "absolute",
  pointerEvents: "none",
  animation: "gradientShift 6s infinite alternate",
  backgroundSize: "200% 200%",
  borderRadius: "17px",
  background: "linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 150, 255, 0.2), rgba(0, 255, 200, 0.2))",
  padding: "2px",
  bottom: "-2px",
  right: "-2px",
  left: "-2px",
  top: "-2px"
};
var innerBorderStyles = {
  position: "absolute",
  pointerEvents: "none",
  boxShadow: "inset 0 0 10px rgba(0, 200, 255, 0.15)",
  border: "1px solid rgba(255, 255, 255, 0.15)",
  borderRadius: "11px",
  bottom: "4px",
  right: "4px",
  left: "4px",
  top: "4px"
};
var gradientOverlayStyles = {
  position: "absolute",
  pointerEvents: "none",
  borderRadius: "15px",
  background: "linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 200, 255, 0.05))",
  height: "100%",
  width: "100%",
  opacity: 0.469,
  left: 0,
  top: 0
};
function HUDHologramContainer(_ref) {
  var _ref$animatedHolograp = _ref.animatedHolographicBorderConfigurationSettings,
    animatedHolographicBorderConfigurationSettings = _ref$animatedHolograp === void 0 ? {} : _ref$animatedHolograp,
    _ref$innerHolographic = _ref.innerHolographicBorderConfigurationSettings,
    innerHolographicBorderConfigurationSettings = _ref$innerHolographic === void 0 ? {} : _ref$innerHolographic,
    _ref$holographicOverl = _ref.holographicOverlayConfigurationSettings,
    holographicOverlayConfigurationSettings = _ref$holographicOverl === void 0 ? {} : _ref$holographicOverl,
    _ref$hoverConfigurati = _ref.hoverConfigurationSettings,
    hoverConfigurationSettings = _ref$hoverConfigurati === void 0 ? {} : _ref$hoverConfigurati,
    _ref$cardConfiguratio = _ref.cardConfigurationSettings,
    cardConfigurationSettings = _ref$cardConfiguratio === void 0 ? {} : _ref$cardConfiguratio,
    _ref$cardConfiguratio2 = _ref.cardConfigurations,
    cardConfigurations = _ref$cardConfiguratio2 === void 0 ? {} : _ref$cardConfiguratio2,
    _ref$onHologramContai = _ref.onHologramContainerMouseLeave,
    onHologramContainerMouseLeave = _ref$onHologramContai === void 0 ? null : _ref$onHologramContai,
    _ref$onHologramContai2 = _ref.onHologramContainerMouseEnter,
    onHologramContainerMouseEnter = _ref$onHologramContai2 === void 0 ? null : _ref$onHologramContai2,
    children = _ref.children;
  var hoverStyles = _objectSpread(_objectSpread({}, baseHoverStyles), hoverConfigurationSettings);
  var cardStyles = _objectSpread(_objectSpread({}, baseCardStyles), cardConfigurationSettings);
  useEffect(function () {
    var styleSheet = document.styleSheets[0];
    var gradientShiftKeyframes = "\n               @keyframes gradientShift {\n                    0% { background-position : 0% 50%; }\n                    100% { background-position : 100% 50%; }\n               }";
    if (styleSheet) {
      styleSheet.insertRule(gradientShiftKeyframes, styleSheet.cssRules.length);
    }
  }, []);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: cardStyles,
    onMouseLeave: function onMouseLeave(e) {
      Object.assign(e.currentTarget.style, cardStyles);
      if (onHologramContainerMouseLeave) {
        onHologramContainerMouseLeave(e);
      }
    },
    onMouseEnter: function onMouseEnter(e) {
      Object.assign(e.currentTarget.style, hoverStyles);
      if (onHologramContainerMouseEnter) {
        onHologramContainerMouseEnter(e);
      }
    }
  }, cardConfigurations), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, animatedGradientBorderStyles), animatedHolographicBorderConfigurationSettings)
  }), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, gradientOverlayStyles), holographicOverlayConfigurationSettings)
  }), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, innerBorderStyles), innerHolographicBorderConfigurationSettings)
  }), children);
}
;
export default HUDHologramContainer;