refac: sponsors

src/components/SponsorList.tsx

@@ -10,7 +10,16 @@ export const SponsorList = () => {
 			description:
 				"Does your interface have a backend yet? Try n8n",
 		},
+
+		{
+			imgSrc: "/sponsors/logos/warp.png",
+			url: "https://warp.dev/open-webui",
+			name: "Warp",
+			description:
+				"The intelligent terminal for developers",
+		},
 	];
+
 	const sponsors = [
 		{
 			imgSrc: "/sponsors/sponsor.png",
@@ -62,8 +71,8 @@ export const SponsorList = () => {
 
 
 				<div className="flex flex-wrap items-start justify-start gap-5">
-				{emeraldSponsors.map((sponsor) => (
+				{emeraldSponsors.map((sponsor, sponsorIdx) => (
-						<Sponsor sponsor={sponsor} />
+						<Sponsor sponsor={sponsor} key={`emerald-${sponsorIdx}`} />
 					))}
 					
 				</div>
@@ -76,8 +85,8 @@ export const SponsorList = () => {
 
 
 				<div className="flex flex-wrap items-start justify-start gap-5">
-				{sponsors.map((sponsor) => (
+				{sponsors.map((sponsor, sponsorIdx) => (
-						<Sponsor sponsor={sponsor} />
+						<Sponsor sponsor={sponsor} key={`emerald-${sponsorIdx}`} />
 					))}
 				</div>
 			</div>			

src/components/Sponsors/TopBanner.tsx

@@ -1,35 +1,31 @@
-export const TopBanner = ({ items }) => {
+export const TopBanner = ({ item }) => {
 	return (
 		<div className="pb-4">
-			{items.map((item) => (
+			<div className="mb-2">
-				<>
+				<div className="mb-1 text-xs font-semibold text-gray-600 underline dark:text-gray-300">
-					<div className="mb-2">
+					Sponsored by {item.name}
-						<div className="mb-1 text-xs font-semibold text-gray-600 underline dark:text-gray-300">
+				</div>
-							Sponsored by {item.name}
-						</div>
 
-						<a href={item.url} target="_blank">
+				<a href={item.url} target="_blank">
-							<img
+					<img
-								className="hidden w-full rounded-xl md:block h-18 object-cover" 
+						className="hidden w-full rounded-xl md:block h-18 object-cover" 
-								loading="lazy"
+						loading="lazy"
-								alt={item.name}
+						alt={item.name}
-								src={item.imgSrc}
+						src={item.imgSrc}
-							/>
+					/>
 
-							<img
+					<img
-								className="block w-full rounded-xl md:hidden h-18 object-cover"
+						className="block w-full rounded-xl md:hidden h-18 object-cover"
-								loading="lazy"
+						loading="lazy"
-								alt={item.name}
+						alt={item.name}
-								src={item?.mobileImgSrc || item.imgSrc}
+						src={item?.mobileImgSrc || item.imgSrc}
-							/>
+					/>
-						</a>
+				</a>
 
-						<div className="mt-1 line-clamp-1 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">
+				<div className="mt-1 line-clamp-1 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">
-							{item.description}
+					{item.description}
-						</div>
+				</div>
-					</div>
+			</div>
-				</>
-			))}
 		</div>
 	);
 };

src/components/TopBanners.tsx

@@ -1,4 +1,5 @@
 import { TopBanner } from "@site/src/components/Sponsors/TopBanner";
+import { useEffect, useState } from "react";
 
 export const TopBanners = () => {
 	const items = [
@@ -20,17 +21,24 @@ export const TopBanners = () => {
 				"Does your interface have a backend yet? Try n8n",
 		},
 
-
 		{
-			imgSrc: "/sponsors/banners/n8n-banner.png",
+			imgSrc: "/sponsors/banners/warp-banner.png",
-			mobileImgSrc: "/sponsors/banners/n8n-banner-mobile.png",
+			mobileImgSrc: "/sponsors/banners/warp-banner-mobile.png",
-			url: "https://n8n.io/",
+			url: "https://warp.dev/open-webui",
-			name: "n8n",
+			name: "Warp",
 			description:
-				"Does your interface have a backend yet? Try n8n",
+				"The intelligent terminal for developers",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/warp-banner.png",
+			mobileImgSrc: "/sponsors/banners/warp-banner-mobile.png",
+			url: "https://warp.dev/open-webui",
+			name: "Warp",
+			description:
+				"The intelligent terminal for developers",
 		},
 
-		
 		{
 			imgSrc: "/sponsors/banners/placeholder.png",
 			mobileImgSrc: "/sponsors/banners/placeholder-mobile.png",
@@ -42,7 +50,15 @@ export const TopBanners = () => {
 	];
 
 	// Randomly select an item to display
-	let selectedItemIdx = Math.floor(Math.random() * items.length);
+	const [selectedItemIdx, setSelectedItemIdx] = useState(Math.floor(Math.random() * items.length));
 
-	return <TopBanner items={[items[selectedItemIdx]]} />;
+	useEffect(() => {
+		// After mounting update every 5 seconds
+		setInterval(() => {
+			setSelectedItemIdx(Math.floor(Math.random() * items.length));
+		}, 10000); // 10000 ms = 10 seconds
+	}, []);
+
+
+	return <TopBanner item={items[selectedItemIdx]} />;
 };