|
@@ -9,82 +9,14 @@ interface RightArrowProps {
|
|
|
const RightArrow: React.FC<RightArrowProps> = ({ themeColor, onClick, className = '' }) => {
|
|
const RightArrow: React.FC<RightArrowProps> = ({ themeColor, onClick, className = '' }) => {
|
|
|
return (
|
|
return (
|
|
|
<button
|
|
<button
|
|
|
- className={`size-20 relative cursor-pointer hover:opacity-80 transition-opacity ${className}`}
|
|
|
|
|
|
|
+ className={`size-20 cursor-pointer hover:opacity-80 transition-opacity ${className}`}
|
|
|
onClick={onClick}
|
|
onClick={onClick}
|
|
|
>
|
|
>
|
|
|
- {/* 背景矩形 */}
|
|
|
|
|
- <div className="left-0 top-0 absolute">
|
|
|
|
|
- <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
- <path
|
|
|
|
|
- fillRule="evenodd"
|
|
|
|
|
- clipRule="evenodd"
|
|
|
|
|
- d="M80 0V80H0V0H80Z"
|
|
|
|
|
- fill="black"
|
|
|
|
|
- fillOpacity="0.0117647"
|
|
|
|
|
- />
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- {/* 第一个三角形 */}
|
|
|
|
|
- <div className="left-[40.62px] top-[16.70px] absolute">
|
|
|
|
|
- <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
- <path
|
|
|
|
|
- d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
|
|
|
|
|
- fill={`url(#paint0_linear_right_arrow)`}
|
|
|
|
|
- stroke={`url(#paint1_linear_right_arrow)`}
|
|
|
|
|
- strokeWidth="1.14286"
|
|
|
|
|
- />
|
|
|
|
|
- <defs>
|
|
|
|
|
- <linearGradient
|
|
|
|
|
- id="paint0_linear_right_arrow"
|
|
|
|
|
- x1="23.9121"
|
|
|
|
|
- y1="47.8244"
|
|
|
|
|
- x2="-0.000147684"
|
|
|
|
|
- y2="47.8244"
|
|
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
|
|
- >
|
|
|
|
|
- <stop stopColor={themeColor} />
|
|
|
|
|
- <stop offset="1" stopColor="#7C5101" />
|
|
|
|
|
- </linearGradient>
|
|
|
|
|
- <linearGradient
|
|
|
|
|
- id="paint1_linear_right_arrow"
|
|
|
|
|
- x1="23.9121"
|
|
|
|
|
- y1="47.8244"
|
|
|
|
|
- x2="-0.000147684"
|
|
|
|
|
- y2="47.8244"
|
|
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
|
|
- >
|
|
|
|
|
- <stop stopColor={themeColor} />
|
|
|
|
|
- <stop offset="1" stopColor="#7C5101" />
|
|
|
|
|
- </linearGradient>
|
|
|
|
|
- </defs>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- {/* 第二个三角形 */}
|
|
|
|
|
- <div className="left-[16.70px] top-[16.70px] absolute">
|
|
|
|
|
- <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
- <path
|
|
|
|
|
- d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
|
|
|
|
|
- fill={themeColor}
|
|
|
|
|
- stroke={`url(#paint0_linear_right_arrow2)`}
|
|
|
|
|
- strokeWidth="1.14286"
|
|
|
|
|
- />
|
|
|
|
|
- <defs>
|
|
|
|
|
- <linearGradient
|
|
|
|
|
- id="paint0_linear_right_arrow2"
|
|
|
|
|
- x1="23.9121"
|
|
|
|
|
- y1="47.8244"
|
|
|
|
|
- x2="-0.000145777"
|
|
|
|
|
- y2="47.8244"
|
|
|
|
|
- gradientUnits="userSpaceOnUse"
|
|
|
|
|
- >
|
|
|
|
|
- <stop stopColor={themeColor} />
|
|
|
|
|
- <stop offset="1" stopColor="#7C5101" />
|
|
|
|
|
- </linearGradient>
|
|
|
|
|
- </defs>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M80 0V80H0V0H80Z" fill="black" fill-opacity="0.0117647"/>
|
|
|
|
|
+ <path d="M41.7227 18.6196L44.5527 29.1392C46.575 36.6563 46.575 44.5751 44.5527 52.0923L41.7227 62.6128L63.7187 40.6157L41.7227 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
|
|
|
|
|
+ <path d="M17.8105 18.6196L20.6406 29.1392C22.6629 36.6563 22.6629 44.5751 20.6406 52.0923L17.8105 62.6128L39.8066 40.6157L17.8105 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
|
|
|
|
|
+ </svg>
|
|
|
</button>
|
|
</button>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|