mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
607f8bdf07
- Introduced CarouselButton component for navigation with multiple color variants (neutral, green, black). - Enhanced CarouselCardListShowcase to include a visual showcase of CarouselButton in various states. - Created CarouselFeatured component showcasing featured images with navigation and responsive behavior. - Updated styles for CarouselButton and integrated it into existing patterns for improved navigation experience.
108 lines
2.4 KiB
TypeScript
108 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* Props for the CarouselButton component
|
|
*/
|
|
export interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
/** Arrow direction */
|
|
direction: 'prev' | 'next';
|
|
/** Color variant */
|
|
variant: 'neutral' | 'green' | 'black';
|
|
}
|
|
|
|
/**
|
|
* CarouselButton Component
|
|
*
|
|
* A circular navigation button for carousel components.
|
|
* Displays left/right arrow icons and supports multiple color variants.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <CarouselButton
|
|
* direction="prev"
|
|
* variant="neutral"
|
|
* onClick={() => scroll('prev')}
|
|
* disabled={!canScrollPrev}
|
|
* aria-label="Previous items"
|
|
* />
|
|
* ```
|
|
*/
|
|
export const CarouselButton: React.FC<CarouselButtonProps> = ({
|
|
direction,
|
|
variant,
|
|
disabled,
|
|
className,
|
|
...buttonProps
|
|
}) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={clsx(
|
|
'bds-carousel-button',
|
|
`bds-carousel-button--${direction}`,
|
|
`bds-carousel-button--${variant}`,
|
|
{ 'bds-carousel-button--disabled': disabled },
|
|
className
|
|
)}
|
|
disabled={disabled}
|
|
{...buttonProps}
|
|
>
|
|
{direction === 'prev' ? <CarouselArrowIconLeft /> : <CarouselArrowIconRight />}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
CarouselButton.displayName = 'CarouselButton';
|
|
|
|
/**
|
|
* SVG Arrow Icon for carousel navigation - Right arrow
|
|
*/
|
|
export const CarouselArrowIconRight: React.FC = () => (
|
|
<svg
|
|
className="bds-carousel-button__arrow-icon"
|
|
width="18"
|
|
height="16"
|
|
viewBox="0 0 18 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M9.33387 1.33461L15.9999 8.00058L9.33387 14.6666M15.9982 7.99893L-0.000149269 7.99893"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeMiterlimit="10"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
CarouselArrowIconRight.displayName = 'CarouselArrowIconRight';
|
|
|
|
/**
|
|
* SVG Arrow Icon for carousel navigation - Left arrow
|
|
*/
|
|
export const CarouselArrowIconLeft: React.FC = () => (
|
|
<svg
|
|
className="bds-carousel-button__arrow-icon"
|
|
width="18"
|
|
height="15"
|
|
viewBox="0 0 18 15"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M7.72667 0.530285L1.0607 7.19626L7.72667 13.8622M1.06235 7.19461L17.0607 7.19461"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeMiterlimit="10"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
CarouselArrowIconLeft.displayName = 'CarouselArrowIconLeft';
|
|
|
|
export default CarouselButton;
|
|
|