refac

src/components/SidebarBanners.tsx

@@ -0,0 +1,64 @@
+import { SidebarBanner } from "@site/src/components/Sponsors/SidebarBanner";
+import { useEffect, useState } from "react";
+
+export const SidebarBanners = () => {
+	const items = [
+		{
+			imgSrc: "/sponsors/banners/n8n-banner.png",
+			mobileImgSrc: "/sponsors/banners/n8n-banner-mobile.png",
+			url: "https://n8n.io/",
+			name: "n8n",
+			description:
+				"Does your interface have a backend yet? Try n8n",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/n8n-banner.png",
+			mobileImgSrc: "/sponsors/banners/n8n-banner-mobile.png",
+			url: "https://n8n.io/",
+			name: "n8n",
+			description:
+				"Does your interface have a backend yet? Try n8n",
+		},
+
+		{
+			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/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",
+			url: "https://forms.gle/92mvG3ESYj47zzRL9",
+			name: "Open WebUI",
+			description:
+				"The top banner spot is reserved for Emerald+ Enterprise sponsors",
+		},
+	];
+
+	// Randomly select an item to display
+	const [selectedItemIdx, setSelectedItemIdx] = useState(Math.floor(Math.random() * items.length));
+
+	useEffect(() => {
+		// After mounting update every 5 seconds
+		setInterval(() => {
+			setSelectedItemIdx(Math.floor(Math.random() * items.length));
+		}, 10000); // 10000 ms = 10 seconds
+	}, []);
+
+
+	return <SidebarBanner item={items[selectedItemIdx]} />;
+};

src/components/Sponsors/SidebarBanner.tsx

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