mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
Update payments and tokenization pages with new components and layout adjustments
- Changed the payments page to use `index.page.tsx` instead of `index.md` for better component integration. - Added `AdvantagesSection` and `ProjectCards` components to both payments and tokenization pages to enhance content presentation. - Adjusted CSS styles for improved responsiveness and layout consistency across different screen sizes. - Removed outdated security card implementation in tokenization page and replaced it with a more streamlined advantages section.
This commit is contained in:
akcodez
99
shared/components/advantages-section.tsx
Normal file
99
shared/components/advantages-section.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from "react";
|
||||
import { useThemeHooks } from '@redocly/theme/core/hooks';
|
||||
import { Link } from "@redocly/theme/components/Link/Link";
|
||||
|
||||
interface AdvantageContent {
|
||||
href?: string;
|
||||
subtitle: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface Advantage {
|
||||
id: string;
|
||||
title: string;
|
||||
contents: AdvantageContent[];
|
||||
}
|
||||
|
||||
interface AdvantagesSectionProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
advantages: Advantage[];
|
||||
className?: string;
|
||||
useLinks?: boolean; // New prop to control whether to use links or bullet points
|
||||
}
|
||||
|
||||
const AdvantageCard = (advantageContents: AdvantageContent[], useLinks: boolean = true) => {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
|
||||
if (useLinks) {
|
||||
// Original tokenization style with links
|
||||
return advantageContents.map((content) => (
|
||||
<div key={content.subtitle}>
|
||||
<Link to={content.href}><h5 className="card-subhead">{translate(content.subtitle)}:</h5></Link>
|
||||
<div className="card-text">
|
||||
{translate(content?.description || "")}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
} else {
|
||||
// Payments style with bullet points
|
||||
return (
|
||||
<ul className="advantages-list">
|
||||
{advantageContents.map((content) => (
|
||||
<li key={content.subtitle} className="advantage-item">
|
||||
<strong>{translate(content.subtitle)}</strong>
|
||||
{content.description && (
|
||||
<span className="advantage-description">{translate(content.description)}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const AdvantagesSection: React.FC<AdvantagesSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
advantages,
|
||||
className = "",
|
||||
useLinks = true
|
||||
}) => {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
|
||||
// Dynamic grid class based on number of advantages
|
||||
const getGridClass = () => {
|
||||
const count = advantages.length;
|
||||
if (count === 3) return "security-card-grid-3";
|
||||
if (count === 4) return "security-card-grid-4";
|
||||
return "security-card-grid"; // fallback to original
|
||||
};
|
||||
|
||||
const headerSpacingClass = useLinks ? "mb-16" : "mb-8"; // 32px for bullet version, 64px for links
|
||||
|
||||
return (
|
||||
<section className={`advantages-section container-new py-20 ${className}`}>
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<p className={headerSpacingClass}>
|
||||
{translate(description)}
|
||||
</p>
|
||||
<h4 className="eyebrow mb-8">{translate(title)}</h4>
|
||||
</div>
|
||||
<div
|
||||
className={`${getGridClass()} nav card-grid`}
|
||||
id="security-features"
|
||||
>
|
||||
{advantages.map((advantage) => (
|
||||
<div className="security-card" key={advantage.id}>
|
||||
<div className="card-body p-6">
|
||||
<h4 className="card-title h6">{translate(advantage.title)}</h4>
|
||||
{AdvantageCard(advantage.contents, useLinks)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
148
shared/components/project-cards.tsx
Normal file
148
shared/components/project-cards.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import React, { useState } from "react";
|
||||
import { useThemeHooks } from '@redocly/theme/core/hooks';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
description?: string; // New optional field for payments page
|
||||
}
|
||||
|
||||
interface ProjectCardsProps {
|
||||
title: string;
|
||||
projects: Project[];
|
||||
showCarousel?: boolean; // true for tokenization (carousel), false for payments (grid)
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ProjectCard = ({ project, index, showCarousel = true }: {
|
||||
project: Project;
|
||||
index: number;
|
||||
showCarousel?: boolean;
|
||||
}) => {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<a
|
||||
className={`col card float-up-on-hover ${
|
||||
showCarousel
|
||||
? (index % 2 === 0 ? "even" : "odd")
|
||||
: `payments-project-card ${index % 2 === 0 ? "odd" : "even"}`
|
||||
}`}
|
||||
target="_blank"
|
||||
href={project.url}
|
||||
>
|
||||
<div className="project-logo d-flex justify-content-center align-items-center">
|
||||
<img className={project.id} alt={project.label} />
|
||||
</div>
|
||||
{!showCarousel && project.description && (
|
||||
<div className="project-description">
|
||||
{(() => {
|
||||
const words = project.description.split(' ');
|
||||
const firstWord = words[0];
|
||||
const restOfText = words.slice(1).join(' ');
|
||||
return (
|
||||
<>
|
||||
<strong className="first-word">{firstWord}</strong>
|
||||
{restOfText && <span className="rest-text"> {restOfText}</span>}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const FeaturedProjectsCarousel = ({ projects }: { projects: Project[] }) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
const handlePrev = () => {
|
||||
if (currentIndex > 0) {
|
||||
setCurrentIndex(currentIndex - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentIndex < projects.length - 3) {
|
||||
setCurrentIndex(currentIndex + 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="featured-projects">
|
||||
<div className="project-cards-container card-grid card-grid-3xN">
|
||||
<ProjectCard project={projects[currentIndex]} index={currentIndex} />
|
||||
<ProjectCard
|
||||
project={projects[currentIndex + 1]}
|
||||
index={currentIndex + 1}
|
||||
/>
|
||||
<ProjectCard
|
||||
project={projects[currentIndex + 2]}
|
||||
index={currentIndex + 2}
|
||||
/>
|
||||
</div>
|
||||
<div className="arrow-wrapper d-flex justify-content-center mt-16">
|
||||
<button
|
||||
className={`arrow-button prev ${
|
||||
currentIndex > 0 ? "hover-color" : ""
|
||||
}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<img alt="left arrow" />
|
||||
</button>
|
||||
<button
|
||||
className={`arrow-button next ${
|
||||
currentIndex < projects.length - 3 ? "hover-color" : ""
|
||||
}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
<img alt="right arrow" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProjectsGrid = ({ projects }: { projects: Project[] }) => {
|
||||
return (
|
||||
<div className="payments-projects-grid card-grid">
|
||||
{projects.map((project, index) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
project={project}
|
||||
index={index}
|
||||
showCarousel={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ProjectCards: React.FC<ProjectCardsProps> = ({
|
||||
title,
|
||||
projects,
|
||||
showCarousel = true,
|
||||
className = ""
|
||||
}) => {
|
||||
const { useTranslate } = useThemeHooks();
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<section className={`container-new py-20 ${className}`}>
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h4 className="eyebrow mb-16">
|
||||
{translate(title)}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="project-cards">
|
||||
{showCarousel ? (
|
||||
<FeaturedProjectsCarousel projects={projects} />
|
||||
) : (
|
||||
<ProjectsGrid projects={projects} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user