Components
Loading preview...
Here is spend migrator component
npx shadcn@latest add https://21st.dev/r/ln-dev7/spend-migrator// demo.tsx
import * as React from "react";
import SpendMigrator, { type SpendMigratorSite } from "@/components/ui/spend-migrator";
const SpendMigratorDemo = () => {
const sites: SpendMigratorSite[] = [
{
name: "Microsoft",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/240px-Microsoft_logo.svg.png",
price: 1341.04,
},
{
name: "Spotify",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Spotify_icon.svg/240px-Spotify_icon.svg.png",
price: 945.23,
},
{
name: "Meta",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/240px-Meta_Platforms_Inc._logo.svg.png",
price: 789.91,
},
{
name: "Netflix",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/240px-Netflix_2015_logo.svg.png",
price: 1059.33,
},
{
name: "X",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/X_logo_2023.svg/langfr-90px-X_logo_2023.svg.png",
price: 1904.48,
},
{
name: "LinkedIn",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/240px-LinkedIn_logo_initials.png",
price: 1200.76,
},
{
name: "Dropbox",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Dropbox_Icon.svg/240px-Dropbox_Icon.svg.png",
price: 587.55,
},
{
name: "Airbnb",
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Airbnb_Logo_B%C3%A9lo.svg/240px-Airbnb_Logo_B%C3%A9lo.svg.png",
price: 1873.49,
},
];
return (
<div className="flex w-full items-center justify-center p-4">
<SpendMigrator sites={sites} />
</div>
);
};
export { SpendMigratorDemo as DemoOne };