mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-06 10:16:39 +00:00
76c5d6a88d
- 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.
110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { LinkTextCard } from "shared/patterns/LinkTextCard";
|
|
import { ButtonConfig } from "shared/patterns/ButtonGroup";
|
|
import {
|
|
PageGrid,
|
|
PageGridRow,
|
|
PageGridCol,
|
|
} from "shared/components/PageGrid/page-grid";
|
|
import { SectionHeader } from "shared/patterns/SectionHeader";
|
|
|
|
export interface LinkTextCardData {
|
|
/** Heading text for the card */
|
|
heading: string;
|
|
/** Description text for the card */
|
|
description: string;
|
|
/** Optional array of button configurations (max 2) */
|
|
buttons?: ButtonConfig[];
|
|
}
|
|
|
|
export interface LinkTextDirectoryProps {
|
|
/** Section heading (required) */
|
|
heading: string;
|
|
/** Optional description text */
|
|
description?: string;
|
|
/** Array of card data to display */
|
|
cards: LinkTextCardData[];
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* LinkTextDirectory Component
|
|
*
|
|
* A section pattern that displays a numbered list of LinkTextCard components.
|
|
* Features a heading, optional description, and a vertically stacked list of cards
|
|
* with automatic sequential numbering (01, 02, 03...).
|
|
*
|
|
* Layout:
|
|
* - Header section with heading + description
|
|
* - Responsive vertical spacing between cards
|
|
* - Desktop: Right-aligned cards with 40px gaps
|
|
* - Tablet: Left-aligned cards with 32px gaps
|
|
* - Mobile: Left-aligned cards with 24px gaps
|
|
*
|
|
* @example
|
|
* // Basic usage
|
|
* <LinkTextDirectory
|
|
* heading="Explore XRPL Developer Tools"
|
|
* description="XRP Ledger is a compliance-focused blockchain where financial applications come to life"
|
|
* cards={[
|
|
* {
|
|
* heading: "Fast Settlement and Low Fees",
|
|
* description: "Settle transactions in 3-5 seconds for a fraction of a cent",
|
|
* buttons: [
|
|
* { label: "Get Started", href: "/start" },
|
|
* { label: "Learn More", href: "/docs" }
|
|
* ]
|
|
* },
|
|
* {
|
|
* heading: "Secure and Reliable",
|
|
* description: "Built on proven blockchain technology",
|
|
* buttons: [{ label: "Read Docs", href: "/docs" }]
|
|
* }
|
|
* ]}
|
|
* />
|
|
*
|
|
* @example
|
|
* // Without description
|
|
* <LinkTextDirectory
|
|
* heading="Features"
|
|
* cards={cardData}
|
|
* />
|
|
*/
|
|
export const LinkTextDirectory: React.FC<LinkTextDirectoryProps> = ({
|
|
heading,
|
|
description,
|
|
cards,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<PageGrid className={clsx("bds-link-text-directory", className)}>
|
|
<SectionHeader
|
|
heading={heading}
|
|
description={description}
|
|
span={{ base: 12, md: 6, lg: 8 }}
|
|
/>
|
|
|
|
{/* Cards List */}
|
|
<PageGridRow className="bds-link-text-directory__list">
|
|
<PageGridCol span={{ base: 12, md: 8, lg: 8 }} offset={{ lg: 4 }}>
|
|
<ul className="list-none pl-0">
|
|
{cards.map((card, index) => (
|
|
<LinkTextCard
|
|
key={card.heading || index}
|
|
index={index}
|
|
heading={card.heading}
|
|
description={card.description}
|
|
buttons={card.buttons ?? []}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
);
|
|
};
|
|
|
|
export default LinkTextDirectory;
|