react-base-guide/lib/components/slider/navigation.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const arrow_1 = __importDefault(require("../../icons/arrow"));
const Wrapper = styled_components_1.default.div `
  position: absolute;
  height: 48px;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  @media(max-width: ${p => p.theme.screen.mobile}) {
    height: 24px;
  }
`;
const ButtonNav = styled_components_1.default.button `
  position: absolute;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  top: 0;
  bottom: 0;
  left: ${p => p.left || "auto"};
  right: ${p => p.right || "auto"};
  padding: 0;
  border: none;
  outline: none;
  margin: auto;
  background: transparent;
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
  transition: opacity 0.3s;
  @media(max-width: ${p => p.theme.screen.mobile}) {
    width: 24px;
    height: 24px;
  }

  &:hover {
    opacity: 1;
  }
  
  &:disabled {
    pointer-events: none;
    opacity: 0.5;
  }
`;
const SliderNavigation = ({ onPrev, onNext, disabledNavigation }) => ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(ButtonNav, Object.assign({ onClick: onPrev, disabled: disabledNavigation, left: "20px" }, { children: (0, jsx_runtime_1.jsx)(arrow_1.default, { rotate: "90deg" }) })), (0, jsx_runtime_1.jsx)(ButtonNav, Object.assign({ onClick: onNext, disabled: disabledNavigation, right: "20px" }, { children: (0, jsx_runtime_1.jsx)(arrow_1.default, { rotate: "-90deg" }) }))] }));
exports.default = SliderNavigation;
//# sourceMappingURL=navigation.js.map