Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-1import * as React from "react";
import { CashbackPartnersCard, Partner } from "@/components/ui/card-1";
// --- Logo Components using external SVG URLs ---
const GoogleLogo = () => (
<img src="https://svgl.app/library/google.svg" alt="Google logo" className="h-6 w-6" />
);
const AppleLogo = () => (
<img src="https://svgl.app/library/n8n.svg" alt="Apple logo" className="h-7 w-7" />
);
const Slack = () => (
<img src="https://svgl.app/library/slack.svg" alt="Mailchimp logo" className="h-7 w-7" />
);
const FigmaLogo = () => (
<img src="https://svgl.app/library/figma.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;