mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
a4b1925b31
* adding linktextcard + linktextdirectory * adding dark mode * code review clean up * code review comments
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { ButtonGroup, ButtonConfig } from '../ButtonGroup';
|
|
|
|
export interface LinkTextCardProps {
|
|
/** Card index for numbering (displays as index + 1) */
|
|
index: number;
|
|
/** Heading text (required) */
|
|
heading: string;
|
|
/** Description text (required) */
|
|
description: string;
|
|
/** Array of button configurations (max 2) */
|
|
buttons: ButtonConfig[];
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* LinkTextCard Component
|
|
*
|
|
* A card component that displays a numbered item with heading, description, and action buttons.
|
|
* Features a top divider, sequential numbering (01, 02, 03...), and up to 2 call-to-action buttons.
|
|
*
|
|
* Design:
|
|
* - Flat HTML structure for minimal DOM depth
|
|
* - Fixed green button color for brand consistency
|
|
* - Responsive typography using existing design tokens
|
|
* - Full light/dark mode support
|
|
*
|
|
* @example
|
|
* // Basic usage
|
|
* <LinkTextCard
|
|
* index={0}
|
|
* 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: "/learn" }
|
|
* ]}
|
|
* />
|
|
*
|
|
* @example
|
|
* // Single button
|
|
* <LinkTextCard
|
|
* index={1}
|
|
* heading="Secure and Reliable"
|
|
* description="Built on proven blockchain technology"
|
|
* buttons={[{ label: "Read Docs", href: "/docs" }]}
|
|
* />
|
|
*/
|
|
export const LinkTextCard: React.FC<LinkTextCardProps> = ({
|
|
index,
|
|
heading,
|
|
description,
|
|
buttons,
|
|
className,
|
|
}) => {
|
|
// Format number with zero padding (01, 02, 03...)
|
|
const formattedNumber = String(index + 1).padStart(2, '0');
|
|
|
|
// Ensure max 2 buttons for proper layout
|
|
const maxButtons = buttons.slice(0, 2);
|
|
|
|
return (
|
|
<li className={clsx('bds-link-text-card', className)}>
|
|
<div className="bds-link-text-card__header">
|
|
<p className="mb-0 body-l">{formattedNumber}</p>
|
|
<h5 className="mb-0 sh-lg-l">{heading}</h5>
|
|
</div>
|
|
<div className="bds-link-text-card__content">
|
|
<p className="mb-0 body-l">{description}</p>
|
|
{maxButtons.length > 0 && (
|
|
<ButtonGroup buttons={maxButtons} color="green" />
|
|
)}
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default LinkTextCard;
|