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: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EMicrosoft%3C/title%3E%3Cpath%20d%3D%22M0%200v11.408h11.408V0zm12.594%200v11.408H24V0zM0%2012.594V24h11.408V12.594zm12.594%200V24H24V12.594z%22/%3E%3C/svg%3E",
      price: 1341.04,
    },
    {
      name: "Spotify",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3ESpotify%3C/title%3E%3Cpath%20d%3D%22M12%200C5.4%200%200%205.4%200%2012s5.4%2012%2012%2012%2012-5.4%2012-12S18.66%200%2012%200zm5.521%2017.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9%204.56-1.021%208.52-.6%2011.64%201.32.42.18.479.659.301%201.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6%209.9%2015%2010.561%2018.72%2012.84c.361.181.54.78.241%201.2zm.12-3.36C15.24%208.4%208.82%208.16%205.16%209.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381%204.26-1.26%2011.28-1.02%2015.721%201.621.539.3.719%201.02.419%201.56-.299.421-1.02.599-1.559.3z%22/%3E%3C/svg%3E",
      price: 945.23,
    },
    {
      name: "Meta",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EMeta%3C/title%3E%3Cpath%20d%3D%22M6.915%204.03c-1.968%200-3.683%201.28-4.871%203.113C.704%209.208%200%2011.883%200%2014.449c0%20.706.07%201.369.21%201.973a6.624%206.624%200%200%200%20.265.86%205.297%205.297%200%200%200%20.371.761c.696%201.159%201.818%201.927%203.593%201.927%201.497%200%202.633-.671%203.965-2.444.76-1.012%201.144-1.626%202.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152%203.595c.724%201.21%201.665%202.556%202.47%203.314%201.046.987%201.992%201.22%203.06%201.22%201.075%200%201.876-.355%202.455-.843a3.743%203.743%200%200%200%20.81-.973c.542-.939.861-2.127.861-3.745%200-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047%200-2.088.467-3.053%201.308-.652.57-1.257%201.29-1.82%202.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16%202.053c1.147%200%202.188.758%202.992%201.999%201.132%201.748%201.647%204.195%201.647%206.4%200%201.548-.368%202.9-1.839%202.9-.58%200-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908%2044.908%200%200%200-1.255-1.98c.07-.109.141-.224.211-.327%201.12-1.667%202.118-2.602%203.358-2.602zm-10.201.553c1.265%200%202.058.791%202.675%201.446.307.327.737.871%201.234%201.579l-1.02%201.566c-.757%201.163-1.882%203.017-2.837%204.338-1.191%201.649-1.81%201.817-2.486%201.817-.524%200-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046%200-2.221.63-4.535%201.66-6.088.454-.687.964-1.226%201.533-1.533a2.264%202.264%200%200%201%201.088-.285z%22/%3E%3C/svg%3E",
      price: 789.91,
    },
    {
      name: "Netflix",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3ENetflix%3C/title%3E%3Cpath%20d%3D%22M5.398%200v.006c3.028%208.556%205.37%2015.175%208.348%2023.596%202.344.058%204.85.398%204.854.398-2.8-7.924-5.923-16.747-8.487-24zm8.489%200v9.63L18.6%2022.951c-.043-7.86-.004-15.913.002-22.95zM5.398%201.05V24c1.873-.225%202.81-.312%204.715-.398v-9.22z%22/%3E%3C/svg%3E",
      price: 1059.33,
    },
    {
      name: "X",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EX%3C/title%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22/%3E%3C/svg%3E",
      price: 1904.48,
    },
    {
      name: "LinkedIn",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3ELinkedIn%3C/title%3E%3Cpath%20d%3D%22M20.447%2020.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853%200-2.136%201.445-2.136%202.939v5.667H9.351V9h3.414v1.561h.046c.477-.9%201.637-1.85%203.37-1.85%203.601%200%204.267%202.37%204.267%205.455v6.286zM5.337%207.433c-1.144%200-2.063-.926-2.063-2.065%200-1.138.92-2.063%202.063-2.063%201.14%200%202.064.925%202.064%202.063%200%201.139-.925%202.065-2.064%202.065zm1.782%2013.019H3.555V9h3.564v11.452zM22.225%200H1.771C.792%200%200%20.774%200%201.729v20.542C0%2023.227.792%2024%201.771%2024h20.451C23.2%2024%2024%2023.227%2024%2022.271V1.729C24%20.774%2023.2%200%2022.222%200h.003z%22/%3E%3C/svg%3E",
      price: 1200.76,
    },
    {
      name: "Dropbox",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EDropbox%3C/title%3E%3Cpath%20d%3D%22M6%201.807L0%205.629l6%203.822%206.001-3.822L6%201.807zM18%201.807l-6%203.822%206%203.822%206-3.822-6-3.822zM0%2013.274l6%203.822%206.001-3.822L6%209.452l-6%203.822zM18%209.452l-6%203.822%206%203.822%206-3.822-6-3.822zM6%2018.371l6.001%203.822%206-3.822-6-3.822L6%2018.371z%22/%3E%3C/svg%3E",
      price: 587.55,
    },
    {
      name: "Airbnb",
      logo: "data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EAirbnb%3C/title%3E%3Cpath%20d%3D%22M12.001%2018.275c-1.353-1.697-2.148-3.184-2.413-4.457-.263-1.027-.16-1.848.291-2.465.477-.71%201.188-1.056%202.121-1.056s1.643.345%202.12%201.063c.446.61.558%201.432.286%202.465-.291%201.298-1.085%202.785-2.412%204.458zm9.601%201.14c-.185%201.246-1.034%202.28-2.2%202.783-2.253.98-4.483-.583-6.392-2.704%203.157-3.951%203.74-7.028%202.385-9.018-.795-1.14-1.933-1.695-3.394-1.695-2.944%200-4.563%202.49-3.927%205.382.37%201.565%201.352%203.343%202.917%205.332-.98%201.085-1.91%201.856-2.732%202.333-.636.344-1.245.558-1.828.609-2.679.399-4.778-2.2-3.825-4.88.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178%203.242-6.79%205.285-10.795l.053-.132.58-1.116c.45-.822.635-1.19%201.351-1.643.346-.21.77-.315%201.246-.315.954%200%201.698.558%202.016%201.007.158.239.345.557.582.953l.558%201.089.08.159c2.041%204.004%203.821%207.608%205.279%2010.794l.026.025.533%201.22.318.764c.243.613.294%201.222.213%201.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317%201.461%2014.468%200%2012.001%200c-2.44%200-3.476%201.695-4.535%203.898l-.081.16c-1.669%203.236-3.421%206.843-5.303%2010.847v.053l-.559%201.22c-.21.504-.317.768-.345.847C-.172%2020.74%202.611%2024%205.98%2024c.027%200%20.132%200%20.265-.027h.372c1.75-.213%203.554-1.325%205.384-3.317%201.829%201.989%203.635%203.104%205.382%203.317h.372c.133.027.239.027.265.027%203.37.003%206.152-3.261%204.802-6.975z%22/%3E%3C/svg%3E",
      price: 1873.49,
    },
  ];

  return (
    <div className="flex w-full items-center justify-center p-4">
      <SpendMigrator sites={sites} />
    </div>
  );
};

export { SpendMigratorDemo as DemoOne };

export default SpendMigratorDemo