Developers Digest
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
type Direction = "left" | "right";
|
|
|
|
interface ChevronSlideProps extends React.SVGAttributes<SVGElement> {
|
|
direction?: Direction;
|
|
size?: number; // pixel size for width/height
|
|
}
|
|
|
|
export function ChevronSlide({
|
|
direction = "right",
|
|
size = 16,
|
|
className,
|
|
...props
|
|
}: ChevronSlideProps) {
|
|
const translateClass =
|
|
direction === "right"
|
|
? "group-hover:translate-x-8"
|
|
: "group-hover:-translate-x-8";
|
|
const orientationClass = direction === "right" ? "" : "rotate-180";
|
|
|
|
return (
|
|
<svg
|
|
className={cn(
|
|
"transition-all",
|
|
translateClass,
|
|
orientationClass,
|
|
className,
|
|
)}
|
|
fill="none"
|
|
height={size}
|
|
width={size}
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M8.5 13L11.5 10L8.5 7"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.25"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default ChevronSlide;
|