@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDFooter.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 * as React from "react";
import { useState } from "react";
import HUDAnimatedBackground from "./HUDAnimatedBackground.js";
import HUDIcon from "./HUDIcon.js";
var baseStyles = {
  footer: {
    position: "absolute",
    display: "flex",
    flexDirection: "column",
    boxSizing: "border-box",
    width: "100%",
    bottom: 0
  },
  sectionTitle: {
    textTransform: "uppercase",
    textAlign: "center",
    textShadow: "0px 0px 15px rgba(255, 215, 0, 0.7)",
    letterSpacing: "1px",
    fontWeight: "bold",
    fontSize: "1.3em",
    color: "#FFD700",
    marginBottom: "15px"
  },
  horizontalLayout: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  },
  verticalLayout: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  gridLayout: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
    textAlign: "center",
    gap: "25px"
  },
  link: {
    transition: "color 0.3s ease, transform 0.2s ease",
    textDecoration: "none",
    fontSize: "1em",
    color: "#FFFFFF"
  },
  linkHover: {
    transform: "scale(1.1)",
    color: "#FFD700"
  },
  socialIcon: {
    transition: "transform 0.3s ease"
  },
  socialIconHover: {
    transform: "scale(1.2) rotate(10deg)"
  }
};
function GridItem(_ref) {
  var _ref$itemIconConfigur = _ref.itemIconConfigurationSettings,
    itemIconConfigurationSettings = _ref$itemIconConfigur === void 0 ? {} : _ref$itemIconConfigur,
    _ref$itemConfiguratio = _ref.itemConfigurationSettings,
    itemConfigurationSettings = _ref$itemConfiguratio === void 0 ? {} : _ref$itemConfiguratio,
    _ref$itemLabelConfigu = _ref.itemLabelConfigurations,
    itemLabelConfigurations = _ref$itemLabelConfigu === void 0 ? {} : _ref$itemLabelConfigu,
    _ref$itemIconConfigur2 = _ref.itemIconConfigurations,
    itemIconConfigurations = _ref$itemIconConfigur2 === void 0 ? {} : _ref$itemIconConfigur2,
    _ref$itemConfiguratio2 = _ref.itemConfigurations,
    itemConfigurations = _ref$itemConfiguratio2 === void 0 ? {} : _ref$itemConfiguratio2,
    item = _ref.item;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hovered = _useState2[0],
    setHovered = _useState2[1];
  return /*#__PURE__*/React.createElement("a", _extends({
    href: item.link,
    target: "_blank",
    rel: "noopener noreferrer",
    style: _objectSpread({
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      textDecoration: "none",
      transition: "color 0.3s ease, transform 0.2s ease, font-size 0.2s ease",
      transform: hovered ? "scale(1.05)" : "scale(1)",
      fontSize: hovered ? "1.069em" : "1em",
      color: hovered ? "#FFD700" : "#FFFFFF",
      padding: "10px"
    }, itemConfigurationSettings),
    onMouseLeave: function onMouseLeave() {
      return setHovered(false);
    },
    onMouseEnter: function onMouseEnter() {
      return setHovered(true);
    }
  }, itemConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    iconConfigurationSettings: _objectSpread({
      transition: "transform 0.3s ease",
      transform: hovered ? "scale(1.1069)" : "scale(1)",
      marginBottom: "5px"
    }, itemIconConfigurationSettings),
    color: "white"
  }, item.iconConfigurations || {}, itemIconConfigurations)), /*#__PURE__*/React.createElement("span", itemLabelConfigurations, item.label));
}
;
export function HUDFooter(_ref2) {
  var _ref2$footerAnimatedB = _ref2.footerAnimatedBackgroundConfigurationSettings,
    footerAnimatedBackgroundConfigurationSettings = _ref2$footerAnimatedB === void 0 ? {} : _ref2$footerAnimatedB,
    _ref2$footerAnimatedC = _ref2.footerAnimatedComponentConfigurationSettings,
    footerAnimatedComponentConfigurationSettings = _ref2$footerAnimatedC === void 0 ? {} : _ref2$footerAnimatedC,
    _ref2$footerContentCo = _ref2.footerContentConfigurationSettings,
    footerContentConfigurationSettings = _ref2$footerContentCo === void 0 ? {} : _ref2$footerContentCo,
    _ref2$footerBottomCon = _ref2.footerBottomConfigurationSettings,
    footerBottomConfigurationSettings = _ref2$footerBottomCon === void 0 ? {} : _ref2$footerBottomCon,
    _ref2$footerUpperConf = _ref2.footerUpperConfigurationSettings,
    footerUpperConfigurationSettings = _ref2$footerUpperConf === void 0 ? {} : _ref2$footerUpperConf,
    _ref2$footerConfigura = _ref2.footerConfigurationSettings,
    footerConfigurationSettings = _ref2$footerConfigura === void 0 ? {} : _ref2$footerConfigura,
    _ref2$animatedBackgro = _ref2.animatedBackgroundConfigurations,
    animatedBackgroundConfigurations = _ref2$animatedBackgro === void 0 ? {} : _ref2$animatedBackgro,
    _ref2$animatedBackgro2 = _ref2.animatedBackgroundContent,
    animatedBackgroundContent = _ref2$animatedBackgro2 === void 0 ? [] : _ref2$animatedBackgro2,
    _ref2$layout = _ref2.layout,
    layout = _ref2$layout === void 0 ? "horizontal" : _ref2$layout,
    _ref2$backgroundColor = _ref2.backgroundColor,
    backgroundColor = _ref2$backgroundColor === void 0 ? "#1A1A1A" : _ref2$backgroundColor,
    _ref2$textColor = _ref2.textColor,
    textColor = _ref2$textColor === void 0 ? "#FFFFFF" : _ref2$textColor,
    _ref2$footerTopBorder = _ref2.footerTopBorder,
    footerTopBorder = _ref2$footerTopBorder === void 0 ? "3px solid rgba(227, 227, 227, 1)" : _ref2$footerTopBorder,
    _ref2$animatedBackgro3 = _ref2.animatedBackground,
    animatedBackground = _ref2$animatedBackgro3 === void 0 ? false : _ref2$animatedBackgro3,
    _ref2$animationMode = _ref2.animationMode,
    animationMode = _ref2$animationMode === void 0 ? "blackHole" : _ref2$animationMode,
    footerUpper = _ref2.footerUpper,
    footerBottom = _ref2.footerBottom,
    children = _ref2.children;
  var layoutStyles = {
    horizontal: baseStyles.horizontalLayout,
    vertical: baseStyles.verticalLayout,
    grid: baseStyles.gridLayout
  }[layout] || baseStyles.horizontalLayout;
  var footerStyles = _objectSpread(_objectSpread({}, baseStyles.footer), {}, {
    fontFamily: "Arial, sans-serif",
    borderTop: footerTopBorder,
    backgroundColor: backgroundColor,
    color: textColor
  }, footerConfigurationSettings);
  return /*#__PURE__*/React.createElement("footer", {
    style: footerStyles
  }, animatedBackground && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "absolute",
      height: "100%",
      width: "100%"
    }, footerUpperConfigurationSettings)
  }, /*#__PURE__*/React.createElement(HUDAnimatedBackground, _extends({
    animatedBackgroundConfigurationSettings: _objectSpread({
      height: "100%",
      width: "100%",
      background: "rgba(15, 15, 15, 1)"
    }, footerAnimatedBackgroundConfigurationSettings),
    animatedComponentConfigurationSettings: _objectSpread({
      height: "50px",
      width: "50px"
    }, footerAnimatedComponentConfigurationSettings),
    nAnimatedComponents: 22,
    focalPoint: {
      x: "calc(15%)",
      y: "calc(15%)",
      radialFocal: false,
      diameter: 269,
      maxDistance: 269
    },
    content: animatedBackgroundContent,
    cycleContent: false,
    animationMode: animationMode,
    animations: [{
      animationName: "defaultMove",
      animationDuration: "5.69s",
      animationTimingFunction: "ease-in-out"
    }]
  }, animatedBackgroundConfigurations))), footerUpper && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      width: "100%",
      zIndex: 869
    }, footerUpperConfigurationSettings)
  }, footerUpper), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({
      zIndex: 869
    }, layoutStyles), footerContentConfigurationSettings)
  }, children), footerBottom && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      width: "100%",
      zIndex: 869
    }, footerBottomConfigurationSettings)
  }, footerBottom));
}
;
export function HUDFooterTopSection(_ref3) {
  var _ref3$topSectionConfi = _ref3.topSectionConfigurations,
    topSectionConfigurations = _ref3$topSectionConfi === void 0 ? {} : _ref3$topSectionConfi,
    _ref3$style = _ref3.style,
    style = _ref3$style === void 0 ? {} : _ref3$style,
    children = _ref3.children;
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      flexWrap: "wrap",
      borderBottom: "2px solid rgba(255, 255, 255, 0.2)",
      padding: "15px 20px"
    }, style)
  }, topSectionConfigurations), children);
}
;
export function HUDFooterContentSection(_ref4) {
  var _ref4$footerContentSe = _ref4.footerContentSectionConfigurations,
    footerContentSectionConfigurations = _ref4$footerContentSe === void 0 ? {} : _ref4$footerContentSe,
    _ref4$style = _ref4.style,
    style = _ref4$style === void 0 ? {} : _ref4$style,
    children = _ref4.children;
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      flex: 1,
      transition: "background 0.369s ease",
      textAlign: "center",
      fontSize: "1.1em",
      borderRadius: "8px",
      backgroundColor: "rgba(255, 255, 255, 0.05)",
      padding: "25px"
    }, style)
  }, footerContentSectionConfigurations), children);
}
;
export function HUDFooterBottomSection(_ref5) {
  var _ref5$footerBottomSec = _ref5.footerBottomSectionConfigurations,
    footerBottomSectionConfigurations = _ref5$footerBottomSec === void 0 ? {} : _ref5$footerBottomSec,
    _ref5$style = _ref5.style,
    style = _ref5$style === void 0 ? {} : _ref5$style,
    children = _ref5.children;
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      borderTop: "1px solid #444",
      backgroundColor: "transparent",
      textAlign: "center",
      padding: "20px"
    }, style)
  }, footerBottomSectionConfigurations), children);
}
;
export function HUDFooterSplitSection(_ref6) {
  var _ref6$titleConfigurat = _ref6.titleConfigurationSettings,
    titleConfigurationSettings = _ref6$titleConfigurat === void 0 ? {} : _ref6$titleConfigurat,
    _ref6$rightConfigurat = _ref6.rightConfigurationSettings,
    rightConfigurationSettings = _ref6$rightConfigurat === void 0 ? {} : _ref6$rightConfigurat,
    _ref6$leftConfigurati = _ref6.leftConfigurationSettings,
    leftConfigurationSettings = _ref6$leftConfigurati === void 0 ? {} : _ref6$leftConfigurati,
    _ref6$footerSplitSect = _ref6.footerSplitSectionConfigurations,
    footerSplitSectionConfigurations = _ref6$footerSplitSect === void 0 ? {} : _ref6$footerSplitSect,
    _ref6$titleConfigurat2 = _ref6.titleConfigurations,
    titleConfigurations = _ref6$titleConfigurat2 === void 0 ? {} : _ref6$titleConfigurat2,
    _ref6$rightConfigurat2 = _ref6.rightConfigurations,
    rightConfigurations = _ref6$rightConfigurat2 === void 0 ? {} : _ref6$rightConfigurat2,
    _ref6$leftConfigurati2 = _ref6.leftConfigurations,
    leftConfigurations = _ref6$leftConfigurati2 === void 0 ? {} : _ref6$leftConfigurati2,
    _ref6$style = _ref6.style,
    style = _ref6$style === void 0 ? {} : _ref6$style,
    _ref6$sectionTitle = _ref6.sectionTitle,
    sectionTitle = _ref6$sectionTitle === void 0 ? "" : _ref6$sectionTitle,
    rightPanel = _ref6.rightPanel,
    leftPanel = _ref6.leftPanel;
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      padding: "20px"
    }, style)
  }, footerSplitSectionConfigurations), sectionTitle && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      textAlign: "center",
      fontWeight: "bold",
      fontSize: "1.2em",
      marginBottom: "10px"
    }, titleConfigurationSettings)
  }, titleConfigurations), sectionTitle), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      transition: "flex 0.369s ease, padding 0.369s ease",
      flex: 1,
      padding: "20px"
    }, leftConfigurationSettings)
  }, leftConfigurations), leftPanel), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      transition: "flex 0.369s ease, padding 0.369s ease",
      flex: 1,
      padding: "20px"
    }, rightConfigurationSettings)
  }, rightConfigurations), rightPanel)));
}
;
export function HUDFooterGridSection(_ref7) {
  var _ref7$itemIconConfigu = _ref7.itemIconConfigurationSettings,
    itemIconConfigurationSettings = _ref7$itemIconConfigu === void 0 ? {} : _ref7$itemIconConfigu,
    _ref7$titleConfigurat = _ref7.titleConfigurationSettings,
    titleConfigurationSettings = _ref7$titleConfigurat === void 0 ? {} : _ref7$titleConfigurat,
    _ref7$itemConfigurati = _ref7.itemConfigurationSettings,
    itemConfigurationSettings = _ref7$itemConfigurati === void 0 ? {} : _ref7$itemConfigurati,
    _ref7$gridConfigurati = _ref7.gridConfigurationSettings,
    gridConfigurationSettings = _ref7$gridConfigurati === void 0 ? {} : _ref7$gridConfigurati,
    _ref7$style = _ref7.style,
    style = _ref7$style === void 0 ? {} : _ref7$style,
    _ref7$gridContainerCo = _ref7.gridContainerConfigurations,
    gridContainerConfigurations = _ref7$gridContainerCo === void 0 ? {} : _ref7$gridContainerCo,
    _ref7$itemLabelConfig = _ref7.itemLabelConfigurations,
    itemLabelConfigurations = _ref7$itemLabelConfig === void 0 ? {} : _ref7$itemLabelConfig,
    _ref7$itemIconConfigu2 = _ref7.itemIconConfigurations,
    itemIconConfigurations = _ref7$itemIconConfigu2 === void 0 ? {} : _ref7$itemIconConfigu2,
    _ref7$gridItemConfigu = _ref7.gridItemConfigurations,
    gridItemConfigurations = _ref7$gridItemConfigu === void 0 ? {} : _ref7$gridItemConfigu,
    _ref7$titleConfigurat2 = _ref7.titleConfigurations,
    titleConfigurations = _ref7$titleConfigurat2 === void 0 ? {} : _ref7$titleConfigurat2,
    _ref7$gridConfigurati2 = _ref7.gridConfigurations,
    gridConfigurations = _ref7$gridConfigurati2 === void 0 ? {} : _ref7$gridConfigurati2,
    _ref7$itemConfigurati2 = _ref7.itemConfigurations,
    itemConfigurations = _ref7$itemConfigurati2 === void 0 ? {} : _ref7$itemConfigurati2,
    _ref7$sectionTitle = _ref7.sectionTitle,
    sectionTitle = _ref7$sectionTitle === void 0 ? "" : _ref7$sectionTitle,
    _ref7$gap = _ref7.gap,
    gap = _ref7$gap === void 0 ? "35px" : _ref7$gap,
    _ref7$columns = _ref7.columns,
    columns = _ref7$columns === void 0 ? 4 : _ref7$columns,
    _ref7$items = _ref7.items,
    items = _ref7$items === void 0 ? [] : _ref7$items;
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "flex",
      flex: 1,
      flexDirection: "column",
      alignItems: "center",
      textAlign: "center",
      padding: "25px"
    }, style)
  }, gridContainerConfigurations), sectionTitle && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      textTransform: "uppercase",
      textAlign: "center",
      textShadow: "0px 0px 12px rgba(255, 215, 0, 0.8)",
      letterSpacing: "1px",
      fontWeight: "bold",
      fontSize: "1.169em",
      color: "#FFD700",
      marginBottom: "20px"
    }, titleConfigurationSettings)
  }, titleConfigurations), sectionTitle), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: "grid",
      gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
      textAlign: "center",
      maxWidth: "600px",
      width: "100%",
      gap: gap
    }, gridConfigurationSettings)
  }, gridConfigurations), items.map(function (item, index) {
    return /*#__PURE__*/React.createElement(GridItem, _extends({
      key: index,
      itemIconConfigurationSettings: itemIconConfigurationSettings,
      itemConfigurationSettings: itemConfigurationSettings,
      itemLabelConfigurations: itemLabelConfigurations,
      itemIconConfigurations: itemIconConfigurations,
      itemConfigurations: itemConfigurations,
      item: item
    }, gridItemConfigurations));
  })));
}
;
export function HUDFooterListSection(_ref8) {
  var _ref8$itemContainerCo = _ref8.itemContainerConfigurationSettings,
    itemContainerConfigurationSettings = _ref8$itemContainerCo === void 0 ? {} : _ref8$itemContainerCo,
    _ref8$titleConfigurat = _ref8.titleConfigurationSettings,
    titleConfigurationSettings = _ref8$titleConfigurat === void 0 ? {} : _ref8$titleConfigurat,
    _ref8$listConfigurati = _ref8.listConfigurationSettings,
    listConfigurationSettings = _ref8$listConfigurati === void 0 ? {} : _ref8$listConfigurati,
    _ref8$style = _ref8.style,
    style = _ref8$style === void 0 ? {} : _ref8$style,
    _ref8$footerListSecti = _ref8.footerListSectionConfigurations,
    footerListSectionConfigurations = _ref8$footerListSecti === void 0 ? {} : _ref8$footerListSecti,
    _ref8$itemContainerCo2 = _ref8.itemContainerConfigurations,
    itemContainerConfigurations = _ref8$itemContainerCo2 === void 0 ? {} : _ref8$itemContainerCo2,
    _ref8$titleConfigurat2 = _ref8.titleConfigurations,
    titleConfigurations = _ref8$titleConfigurat2 === void 0 ? {} : _ref8$titleConfigurat2,
    _ref8$listConfigurati2 = _ref8.listConfigurations,
    listConfigurations = _ref8$listConfigurati2 === void 0 ? {} : _ref8$listConfigurati2,
    _ref8$itemConfigurati = _ref8.itemConfigurations,
    itemConfigurations = _ref8$itemConfigurati === void 0 ? {} : _ref8$itemConfigurati,
    _ref8$sectionTitle = _ref8.sectionTitle,
    sectionTitle = _ref8$sectionTitle === void 0 ? "" : _ref8$sectionTitle,
    _ref8$orientation = _ref8.orientation,
    orientation = _ref8$orientation === void 0 ? "vertical" : _ref8$orientation,
    _ref8$gap = _ref8.gap,
    gap = _ref8$gap === void 0 ? "10px" : _ref8$gap,
    _ref8$items = _ref8.items,
    items = _ref8$items === void 0 ? [] : _ref8$items;
  var horizontal = orientation === "horizontal";
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      padding: "20px"
    }, style)
  }, footerListSectionConfigurations), sectionTitle && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      textAlign: "center",
      fontWeight: "bold",
      fontSize: "1.2em",
      marginBottom: "10px"
    }, titleConfigurationSettings)
  }, titleConfigurations), sectionTitle), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread({
      display: horizontal ? "flex" : "flex",
      flexDirection: horizontal ? "row" : "column",
      alignItems: horizontal ? "center" : "flex-start",
      textAlign: "center",
      gap: gap
    }, listConfigurationSettings)
  }, listConfigurations), items.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", _extends({
      key: index,
      style: _objectSpread({}, itemContainerConfigurationSettings)
    }, itemContainerConfigurations), typeof item === "string" ? /*#__PURE__*/React.createElement("span", itemConfigurations, item) : item);
  })));
}
;