This commit is contained in:
Timothy Jaeryang Baek
2025-06-11 00:52:03 +04:00
parent 20534eef5e
commit e3f404a08a
4 changed files with 72 additions and 13 deletions

View File

@@ -1,30 +1,47 @@
export const TopBanner = ({ item }) => {
export const TopBanner = ({item, bannerClassName = 'h-18 ', label = true, description= true,mobile = true }) => {
return (
<div className="pb-4">
<div className="mb-2">
<div className="w-full">
<div className="flex flex-col justify-center w-full">
{label &&
<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" className="flex items-center justify-center w-full">
{mobile ? <>
<img
className={`hidden md:block w-full rounded-xl object-cover ${bannerClassName}`}
loading="lazy"
alt={item.name}
src={item.imgSrc}
/>
<img
className={`block w-full rounded-xl md:hidden object-cover ${bannerClassName}`}
loading="lazy"
alt={item.name}
src={item?.mobileImgSrc || item.imgSrc}
/>
</> : <>
<a href={item.url} target="_blank">
<img
className="hidden w-full rounded-xl md:block h-18 object-cover"
className={`w-full rounded-xl object-cover ${bannerClassName}`}
loading="lazy"
alt={item.name}
src={item.imgSrc}
/>
<img
className="block w-full rounded-xl md:hidden h-18 object-cover"
loading="lazy"
alt={item.name}
src={item?.mobileImgSrc || item.imgSrc}
/>
</> }
</a>
{description &&
<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>
);

View File

@@ -1,7 +1,7 @@
import { TopBanner } from "@site/src/components/Sponsors/TopBanner";
import { useEffect, useState } from "react";
export const TopBanners = () => {
export const TopBanners = ({bannerClassName = 'h-18', label= true, description= true, mobile = true }) => {
const items = [
{
imgSrc: "/sponsors/banners/n8n-banner.png",
@@ -80,5 +80,5 @@ export const TopBanners = () => {
}, []);
return <TopBanner item={items[selectedItemIdx]} />;
return <TopBanner bannerClassName={bannerClassName} item={items[selectedItemIdx]} label={label} description={description} mobile={mobile} />;
};