[FEAT] - Component → DataCard

[stephen-gift]

Description

Create a reusable Data Card component using Shadcn and Next.js. The Data Card should display a heading with a title and an icon, and a content section that includes an amount and subtext.

Acceptance Criteria

• The Data Card component is implemented according to the design.
• The component should be fully responsive and look good on all screen sizes.
• Ensure accessibility standards are met, including appropriate aria attributes and proper semantic HTML.

Requirements

The component should receive the following props:

• Heading Props:
  • title: string
  • icon: React.ReactNode
• Content Props:
  • amount: string
  • subtext: string

Testing

• Ensure the component renders correctly with all required elements.
• Verify that the title and icon are rendered correctly in the heading.
• Verify that the amount and subtext are rendered correctly in the content section.
• Conduct cross-browser testing to ensure compatibility.
• Check responsiveness on various screen sizes.

Tasks

• [ ] Develop the Data Card component based on the provided requirements.
• [ ] Implement the heading section with title and icon.
• [ ] Implement the content section with amount and subtext.
• [ ] Write unit tests to ensure the component works as expected.
• [ ] Test the component for responsiveness and accessibility.
• [ ] Update documentation with usage instructions.

Images

DataCard

Link

Figma Link

[lordfrantex]

pls i want a custom box shadow effect added on the tailwind.config.ts. theone provided out of the box is not consistent with the style guide. pls. Thanks