Skip to content

Fix unstable key usage in protocol card list #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nishi240931 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix unstable key usage in protocol card list #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccf21f9
Fix unstable key usage in protocol card list
nishi240931 Jan 3, 2026
e483319
Remove unused index prop from Card component
nishi240931 Jan 3, 2026
14cbe72
Use stable composite key for description line rendering
nishi240931 Jan 3, 2026
603e5b4
Use index key for static description line rendering
nishi240931 Jan 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 4 additions & 17 deletions app/protocols/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,35 +93,22 @@ export default function ProtocolsPage() {
<div className="h-56 bg-gradient-to-r from-primary via-info to-secondary blur-[100px]"></div>
<div className="h-56 bg-gradient-to-r from-secondary via-info to-primary blur-[100px]"></div>
</div>

<Container>
{/*
<div className="relative z-20 mb-12 space-y-4 text-center">
<h2 className="text-4xl font-bold text-black md:text-4xl">
Protocols <br /> Researched and Developed <br /> by The Stable Order
</h2>
<p className="text-lg leading-6 text-black opacity-80 lg:mx-auto lg:w-6/12">

</p>
</div>
*/}
{/*
<h2 className="mb-5 text-2xl font-bold text-black underline decoration-dashed underline-offset-4">
Protocols
</h2>
*/}
<div className="mb-20 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
{protocols1.map((protocol, index) => (
<Card
key={index}
index={index}
key={protocol.title}
image={protocol.image}
title={protocol.title}
description={protocol.description}
link={protocol.link}
/>

))}
</div>
</Container>

<CTA
heading="The Stable Order"
text="The Stable Order is an open and mutually supportive collaboration, whose primary activity is the research and development of novel protocols that stabilize the decentralized economy. If you share our goals and would like to work together or support us, get in touch."
Expand Down
14 changes: 8 additions & 6 deletions components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import Image from "next/image"
import Link from "next/link"

interface Props {
index: number
image: string
title: string
description: string
link: string
}

const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
const Card: React.FC<Props> = ({ image, title, description, link }) => {

return (
<Link href={link}>
<div
Expand All @@ -30,14 +30,16 @@ const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
{title}
</h3>
<p className="mb-6 mt-2 text-center text-black">
{description.split("\n").map((item, key) => {
{description.split("\n").map((item, idx) => {
return (
<span key={key}>
<span key={idx}>
{item}
<br />
</span>
)
})}
)
})}


</p>
</div>
</div>
Expand Down