Cashback Partners Card This component displays a card with a title and a grid of partner logos, names, and cashback percentages. It's designed to be responsive and theme-aware, adapting to both light and dark modes.
import * as React from "react";
import { CashbackPartnersCard, Partner } from "@/components/ui/card-1";
// --- Logo Components using external SVG URLs ---
const GoogleLogo = () => (
<img src="https://cdn.21st.dev/assets/mirror/a6/a60266dab17c1c00981c7077fa025aa84c92782e0657ca2f78b7f70cbb8d5a56.svg" alt="Google logo" className="h-6 w-6" />
);
const AppleLogo = () => (
<img src="https://cdn.21st.dev/assets/mirror/de/de2f3496ee97a2f7adeaa65b7e5cab617b425ab37aab4c14c87057a4e2af77f8.svg" alt="Apple logo" className="h-7 w-7" />
);
const Slack = () => (
<img src="https://cdn.21st.dev/assets/mirror/29/29734796b3a85f9d0e03150d53142fab0b7f994ae80c7e3e1efd0bef52c12f5d.svg" alt="Mailchimp logo" className="h-7 w-7" />
);
const FigmaLogo = () => (
<img src="https://cdn.21st.dev/assets/mirror/5b/5bcdea3417293412845b8298fe357fce3b192e8ff112d9b3fef315bc5cd127f6.svg" alt="Figma logo" className="h-7 w-7" />
);
// --- Demo Component ---
const CashbackPartnersDemo = () => {
const partnersData: Partner[] = [
{
name: "Google",
cashback: "1.5%",
logo: <GoogleLogo />,
href: "#",
},
{
name: "N8n",
cashback: "1.1%",
logo: <AppleLogo />,
href: "#",
},
{
name: "Slack",
cashback: "3.2%",
logo: <Slack />,
href: "#",
},
{
name: "Figma",
cashback: "2.8%",
logo: <FigmaLogo />,
href: "#",
},
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<CashbackPartnersCard
title="Cashback From Partners"
partners={partnersData}
/>
</div>
);
};
export default CashbackPartnersDemo;