tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
63 lines (62 loc) • 3.94 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const ArrowButton = ({ initialDirection = "topright", finalDirection = "right", backgroundColor, shadowColor, borderColor, size, onClick, arrowFillColor, arrowStrokeColor, cornerRadius, borderWidth, borderStyle, transitionDuration, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, }) => {
const theme = useTheme();
// Helper function to calculate the rotation angle between initial and final direction
const getRotationAngle = () => {
const directionMap = {
topleft: -135,
top: -90,
topright: -45,
right: 0,
bottomright: 45,
bottom: 90,
bottomleft: 135,
left: 180,
};
const initialAngle = directionMap[initialDirection] || 0;
const finalAngle = directionMap[finalDirection] || 0;
return finalAngle - initialAngle;
};
// Use prop cornerRadius if provided, else theme.cornerRadius
const borderRadiusValue = typeof cornerRadius === "number" ? cornerRadius : theme.cornerRadius ?? 0;
// Compose boxShadow from theme and props
const getBoxShadow = (active) => `${shadowInset ?? theme.shadowInset ? "inset " : ""}${shadowOffsetX ?? theme.shadowOffsetX} ${shadowOffsetY ?? theme.shadowOffsetY} ${shadowBlur ?? theme.shadowBlur} ${shadowSpread ?? theme.shadowSpread} ${active
? shadowColor || theme.shadowColor
: borderColor || theme.borderColor}`;
return (_jsx("div", { onClick: onClick, style: {
borderRadius: borderRadiusValue,
border: `${borderWidth || theme.borderWidth} ${borderStyle || theme.borderStyle} ${borderColor || theme.borderColor}`,
backgroundColor: backgroundColor || theme.backgroundColor,
width: size || theme.spacingfactor * 12,
height: size || theme.spacingfactor * 12,
display: "flex",
boxShadow: getBoxShadow(false),
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
transition: transitionDuration || theme.transitionDuration,
}, onMouseEnter: (e) => {
e.currentTarget.style.boxShadow = getBoxShadow(true);
}, onMouseLeave: (e) => {
e.currentTarget.style.boxShadow = getBoxShadow(false);
}, children: _jsx("div", { style: {
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
transition: transitionDuration || theme.transitionDuration,
rotate: `${-1 * getRotationAngle()}deg`,
}, onMouseEnter: (e) => {
const angle = getRotationAngle();
e.currentTarget.style.transform = `rotate(${angle}deg)`;
}, onMouseLeave: (e) => {
e.currentTarget.style.transform = "rotate(0deg)";
}, children: _jsx("svg", { style: {
width: `${(size || theme.spacingfactor * 12) * 0.75}`,
height: `${(size || theme.spacingfactor * 12) * 0.5}`,
}, viewBox: "0 0 18 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.91229 10.6961L17.4123 6.36601C18.079 5.98111 18.079 5.01886 17.4123 4.63396L9.91229 0.30383C9.24563 -0.08107 8.41229 0.400055 8.41229 1.16985L8.41229 3.49998C8.41229 4.05227 7.96458 4.49998 7.41229 4.49998L1.59598 4.49998C1.04369 4.49998 0.595978 4.9477 0.595978 5.49998C0.595977 6.05227 1.04369 6.49998 1.59598 6.49998L7.41229 6.49998C7.96458 6.49998 8.41229 6.9477 8.41229 7.49998L8.41229 9.83011C8.41229 10.5999 9.24562 11.081 9.91229 10.6961Z", fill: arrowFillColor || theme.textColor, stroke: arrowStrokeColor || theme.borderColor }) }) }) }));
};
export default ArrowButton;