mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 11:16:40 +00:00
f10dbc8c29
* updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com> Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { CardStat, CardStatProps } from "../../components/CardStat";
|
|
import { PageGrid } from "../../components/PageGrid/page-grid";
|
|
import { SectionHeader } from "shared/patterns/SectionHeader";
|
|
|
|
/**
|
|
* Configuration for a single stat card in the CardStats pattern
|
|
*/
|
|
export type CardStatsCardConfig = CardStatProps;
|
|
|
|
/**
|
|
* Props for the CardStats pattern component
|
|
*/
|
|
export interface CardStatsProps extends React.ComponentPropsWithoutRef<"section"> {
|
|
/** Section heading text */
|
|
heading: React.ReactNode;
|
|
/** Optional section description text */
|
|
description?: React.ReactNode;
|
|
/** Array of CardStat configurations */
|
|
cards: CardStatsCardConfig[];
|
|
}
|
|
|
|
/**
|
|
* CardStats Pattern Component
|
|
*
|
|
* A section pattern that displays a heading, optional description, and a responsive
|
|
* grid of CardStat components. Designed for showcasing key statistics and metrics.
|
|
*
|
|
* Features:
|
|
* - Responsive grid layout (2 columns mobile/tablet, 3 columns desktop)
|
|
* - Heading with `heading-md` typography (Tobias Light)
|
|
* - Optional description with `body-l` typography (Booton Light)
|
|
* - Proper spacing using PageGrid for container and alignment
|
|
* - Full dark mode support
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <CardStats
|
|
* heading="Blockchain Trusted at Scale"
|
|
* description="Streamline development and build powerful RWA tokenization solutions."
|
|
* cards={[
|
|
* {
|
|
* statistic: "12",
|
|
* superscript: "+",
|
|
* label: "Continuous uptime years",
|
|
* variant: "lilac",
|
|
* primaryButton: { label: "Learn More", href: "/docs" }
|
|
* },
|
|
* {
|
|
* statistic: "6M",
|
|
* superscript: "2",
|
|
* label: "Active wallets",
|
|
* variant: "light-gray"
|
|
* },
|
|
* // ... more cards
|
|
* ]}
|
|
* />
|
|
* ```
|
|
*/
|
|
export const CardStats = React.forwardRef<HTMLElement, CardStatsProps>(
|
|
(props, ref) => {
|
|
const { heading, description, cards, className, ...rest } = props;
|
|
|
|
// Early return for empty cards array
|
|
if (cards.length === 0) {
|
|
console.warn("CardStats: No cards provided");
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PageGrid
|
|
ref={ref as React.Ref<HTMLDivElement>}
|
|
className={clsx("bds-card-stats", className)}
|
|
{...rest}
|
|
>
|
|
<SectionHeader
|
|
heading={heading}
|
|
description={description}
|
|
span={{ base: 4, md: 6, lg: 8 }}
|
|
/>
|
|
<PageGrid.Row as="ul">
|
|
{cards.map((cardConfig, index) => (
|
|
<CardStat
|
|
key={index}
|
|
{...cardConfig}
|
|
span={cardConfig.span ?? { base: 4, md: 4, lg: 6 }}
|
|
/>
|
|
))}
|
|
</PageGrid.Row>
|
|
</PageGrid>
|
|
);
|
|
},
|
|
);
|
|
|
|
CardStats.displayName = "CardStats";
|
|
|
|
export default CardStats;
|