Back

Version 14

11/13/2024
/** @jsxImportSource https://esm.sh/react */
import { createFalClient } from "https://esm.sh/@fal-ai/client";
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";

const swiftEras = [
{ name: "Debut", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/1.jpg" },
{ name: "Fearless", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/landing-images/1678544276252-2-v2.jpg" },
{ name: "Speak Now", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/3.jpg" },
{ name: "Red", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/4.jpg" },
{ name: "1989", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/5.jpg" },
{ name: "Reputation", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/6.jpg" },
{ name: "Lover", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/7.jpg" },
{ name: "Folklore", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/tour-site/landing-images/8.jpg" },
{ name: "Evermore", image: "https://assets.dmi.umgapps.com/assets/taylor-swift/landing-images/1678544281122-9-v2.jpg" },
{ name: "Midnights", image: "https://assets.dmi.umgapps.com/assets/ts/ttpd/1715195830303-new-midnights.jpg" },
{ name: "TTPD", image: "https://assets.dmi.umgapps.com/assets/ts/ttpd/1715168073245-ttpd.jpg" }
];

function EraSelector({ activeEra, onSelectEra }) {
return (
<div className="flex justify-center items-stretch w-full h-[40vh] overflow-hidden">
{swiftEras.map((era) => (
<button
key={era.name}
aria-label={`Use ${era.name} color scheme`}
onClick={() => onSelectEra(era)}
className={`overflow-hidden transition-all duration-300 ease-in-out ${
activeEra.name === era.name ? 'w-[35%]' : 'w-[6.5%]'
}`}
>
<img src={era.image} alt={era.name} className="w-full h-full object-cover" draggable="false" />
</button>
))}
</div>
vawogbemi-taylorswiftmoments.web.val.run
Updated: November 14, 2024