ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2026-07-30 02:20:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CarouselFeatured to use ButtonGroup for button management, simplifying button rendering logic and improving code maintainability.

Browse Source
This commit is contained in:
akcodez
2026-02-03 10:38:45 -08:00
committed by Calvin Jhunjhuwala
parent 4a9f0d48be
commit ef9dbdfef7
1 changed files with 9 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
shared/patterns/CarouselFeatured/CarouselFeatured.tsx
View File

@@ -1,10 +1,9 @@
import React, { useState, useCallback } from 'react';
import clsx from 'clsx';
import { Button } from '../../components/Button';
import { CarouselButton } from '../../components/CarouselButton';
import { Divider } from '../../components/Divider';
import { PageGrid, PageGridRow, PageGridCol } from '../../components/PageGrid';
import { ButtonConfig } from '../ButtonGroup';
import { ButtonGroup, ButtonConfig } from '../ButtonGroup';
/**
* Props for a single slide in the CarouselFeatured component
@@ -221,35 +220,14 @@ export const CarouselFeatured = React.forwardRef<HTMLElement, CarouselFeaturedPr
primaryButton && tertiaryButton && 'bds-carousel-featured__cta--two-buttons'
)}>
{/* Buttons wrapper - groups primary and tertiary together */}
<div className="bds-carousel-featured__buttons">
{/* Primary button */}
{primaryButton && (
<Button
variant="primary"
color="black"
forceColor={background !== 'neutral'}
href={primaryButton.href}
onClick={primaryButton.onClick}
className="bds-carousel-featured__primary-btn"
>
{primaryButton.label}
</Button>
)}
{/* Tertiary button */}
{tertiaryButton && (
<Button
variant="tertiary"
color="black"
forceColor={background !== 'neutral'}
href={tertiaryButton.href}
onClick={tertiaryButton.onClick}
className="bds-carousel-featured__tertiary-btn"
>
{tertiaryButton.label}
</Button>
)}
</div>
{(primaryButton || tertiaryButton) && (
<ButtonGroup
buttons={[primaryButton, tertiaryButton].filter((btn): btn is ButtonConfig => !!btn)}
color="black"
forceColor={background !== 'neutral'}
className="bds-carousel-featured__buttons"
/>
)}
{/* Mobile/Tablet nav buttons */}
<div className="bds-carousel-featured__nav bds-carousel-featured__nav--mobile">