@idares-ui/react
Version:
16 lines • 1.46 kB
JavaScript
import { __makeTemplateObject } from "tslib";
import * as React from "react";
import { NAVIGATION_BUTTON_TYPES } from "../utils/enum";
import ArrowDown from "../assets/arrow";
import styled from "styled-components";
var ArrowButton = function (_a) {
var type = _a.type;
return (React.createElement(Container, null,
React.createElement(React.Fragment, null,
type === NAVIGATION_BUTTON_TYPES.PREVIOUS && (React.createElement(ArrowDown, { className: "arrow previous" })),
type === NAVIGATION_BUTTON_TYPES.NEXT && (React.createElement(ArrowDown, { className: "arrow next" })))));
};
export default ArrowButton;
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n place-items: center;\n\n .arrow {\n width: 0.8em;\n\n &.previous {\n transform: rotate(90deg);\n }\n\n &.next {\n transform: rotate(-90deg);\n }\n }\n\n &:hover {\n .arrow {\n fill: var(--color-primary);\n transition: fill 0s ease-in-out;\n }\n }\n"], ["\n display: grid;\n place-items: center;\n\n .arrow {\n width: 0.8em;\n\n &.previous {\n transform: rotate(90deg);\n }\n\n &.next {\n transform: rotate(-90deg);\n }\n }\n\n &:hover {\n .arrow {\n fill: var(--color-primary);\n transition: fill 0s ease-in-out;\n }\n }\n"])));
var templateObject_1;
//# sourceMappingURL=ArrowButton.js.map