Standardize List Display with Card Component (#433)

[Michael-Obele]

What kind of change does this PR introduce?

• Enhancement

Issue Number:

• Closes ✨ Enhancement: Create a card component to be able to standarize the usage of list of cards  #433
• Related to ✨ Enhancement: Create the use cases page #426, [📑 Docs]: Lets create a welcome page for the docs section #421 (These issues highlight the need for a standard card component)

Screenshots/videos:

28c1eaa9-2c6f-4431-a36e-9f8ada0b547c.mp4

If relevant, did you update the documentation?

• No documentation was added. But this is a short usage guide
• NB: icon and link are optional

import Card from 'components/Card';

// Example usage
<Card 
  title="Card Title"
  body="This is the card body content."
  icon="path/to/icon.svg"
  link="/link/to/page"
  image="/link/to/image.svg"
/>

Summary

This pull request introduces a new reusable Card component for displaying list items in a standardized format. This component aims to:

• Improve consistency in the visual presentation of list items across the application.
• Enhance code maintainability by providing a centralized component for managing card display logic.

Does this PR introduce a breaking change?

• No, this PR does not introduce any breaking changes. The new Card component is intended to be integrated seamlessly into existing code without affecting functionality.

[VivekJaiswal18]

LGTM
Suggestions:

1. Maybe we can do this without the icons. As we are already having links for the specific use cases in the card itself.
2. Also we can insert the link in the Heading itself. It will make it look less cluttered.
   @benjagm What do we think on this.

[benjagm]

LGTM Suggestions:

1. Maybe we can do this without the icons. As we are already having links for the specific use cases in the card itself.
2. Also we can insert the link in the Heading itself. It will make it look less cluttered.
   @benjagm What do we think on this.

• Icons: Icons are optional. You can use them or not. But it help to have this generic component to be used in multiple contexts.
• Links: Icon, title, and description should be links if there is a link in the json element. In addition I think we should show a button when mouse over in the card like twilio does.

I have some comments of improvements with styles. Is great we are using the same style of the box used in the landing page, however I think we can improve the content inside the card:

• Let's add a new optional field image to build something like Twilio does.

• Title. We need to make the font bigger.

• Padding. I think we should increase the x padding.

• Icon. When Icon is present I think it should be bigger like AsyncAPI does.

[benjagm]

Great first step @Michael-Obele !! Left some comments but this is looking good. I think we'll merge quickly.

[Michael-Obele]

Great first step @Michael-Obele !! Left some comments but this is looking good. I think we'll merge quickly.

Thank you so much; I will get this implemented as soon as possible; the new design is extremely helpful.

[benjagm]

Can you please change the target branch of this PR to : https://github.com/json-schema-org/website/tree/web-release-3

Reference docs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

[Michael-Obele]

Can you please change the target branch of this PR to : https://github.com/json-schema-org/website/tree/web-release-3

Reference docs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

Thanks for the heads-up. I have done just that, and I have also updated the initial PR; please let me know how the new update looks. Thanks.

[benjagm]

@Michael-Obele can you share the code of your testing page please? So I can test it directly...

Huge thanks!!

[Michael-Obele]

@Michael-Obele can you share the code of your testing page please? So I can test it directly...

Huge thanks!!

Sure, happy to help you test the implementation! Here's the code:

• Test Page: You can test it directly on the ~/website/pages/implementations/index.page.tsx page, that's what I did. This essentially navigates to the tools (implementations) page on the website.

• Code Snippet: Here's the specific code I added to the ImplementationTable function to create the card examples:

 <div className='grid grid-cols-2 gap-4 space-y-8 md:grid-cols-3'>
<div className='mt-8'>
  <Card
    title="Document your data"
    body="Create a clear, standardized representation of your data to improve understanding and collaboration among developers, stakeholders, and collaborators."
    icon="https://www.svgrepo.com/show/530677/organic-organism.svg"
    link="/link/to/page"
    image="/img/logos/logo-blue.svg"
  />
  <p>This card includes: title, body, icon, link, and image.</p>
</div><div>
  <Card
    title="Exchange data seamlessly"
    body="Establish a common language for data exchange, no matter the scale or complexity of your project. Define precise validation rules for your data structures to create shared understanding and increase interoperability across different systems and platforms."
    link="/link/to/page"
    image="https://www.svgrepo.com/show/530638/villa.svg"
  />
  <p>This card includes: title, body, link, and image.</p>
</div><div>
  <Card
    title="Harness the power of data visualization"
    body="Gain insights from your data through interactive dashboards and reports. Communicate complex information visually and effectively, driving informed decision-making."
    icon="https://www.svgrepo.com/show/530676/genetically-modified.svg"
    image="https://www.svgrepo.com/show/530638/villa.svg"
  />
  <p>This card includes: title, body, icon, and image.</p>
</div><div>
  <Card
    title="Foster collaboration and agility"
    body="Empower teams to work together seamlessly, regardless of location. Break down information silos and enable real-time communication for increased efficiency and productivity."
    icon="https://www.svgrepo.com/show/530674/nucleus.svg"
    link="/link/to/page"
  />
  <p>This card includes: title, body, icon, and link.</p>
</div><div>
  <Card
    title="Embrace the future of software development"
    body="Unlock the potential of cutting-edge technologies. Stay ahead of the curve by integrating innovative solutions into your development process and deliver exceptional value to your users."
    image="https://www.svgrepo.com/show/530679/gene-sequencing.svg"
  />
  <p>This card includes: title, body, and image.</p>
</div><div>
  <Card
    title="Ensure data security and compliance"
    body="Protect your valuable data with robust security measures. Implement industry-standard best practices and stay compliant with relevant regulations for peace of mind."
    link="/link/to/page"
  />
  <p>This card includes: title, body, and link.</p>
</div><div>
  <Card
    title="Vibrant tooling ecosystem"
    body="Adopt JSON Schema with an expansive range of community-driven tools, libraries, and frameworks across many programming languages."
    icon="https://www.svgrepo.com/show/530669/genetic-test-report.svg"
  />
  <p>This card includes: title, body, and icon.</p>
</div><div>
  <Card
    title="Streamline testing and validation"
    body="Simplify your validation logic to reduce your code’s complexity and save time on development. Define constraints for your data structures to catch and prevent errors, inconsistencies, and invalid data.."
  />
  <p>This card includes: title and body.</p>
</div>
</div>

I hope this clarifies things! Let me know if you have any other questions.

[benjagm]

Thanks @Michael-Obele . I am going to merge this as it is good enough for others to continue the integration in the dependant issues.

[Michael-Obele]

You're welcome. I'm glad to help.