Ilgeldi
/
turkmen-textile-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added new types for banners

This commit is contained in:
Batyr 2025-06-08 12:38:58 +05:00
parent ee1f55c527
commit dad9121dd5
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/shared/home/home-hero.tsx
View File

@ -19,9 +19,20 @@ export const HomeHero: FC = () => {
const md = useMediaQuery("(min-width: 768px)"); const md = useMediaQuery("(min-width: 768px)");
function getBanners() { function getBanners() {
if (lg) return t("banners.lg", { returnObjects: true }) as string[]; if (lg)
if (md) return t("banners.md", { returnObjects: true }) as string[]; return t("banners.lg", { returnObjects: true }) as {
return t("banners.sm", { returnObjects: true }) as string[]; path: string;
link: string;
}[];
if (md)
return t("banners.md", { returnObjects: true }) as {
path: string;
link: string;
}[];
return t("banners.sm", { returnObjects: true }) as {
path: string;
link: string;
}[];
} }
const banners = getBanners(); const banners = getBanners();
@ -32,23 +43,21 @@ export const HomeHero: FC = () => {
<div ref={emblaRef} className="embla overflow-hidden"> <div ref={emblaRef} className="embla overflow-hidden">
<div className="embla__container flex"> <div className="embla__container flex">
{banners?.map((item, i) => {banners?.map((item, i) =>
i === 0 ? ( !item.link ? (
<div key={i} className="embla__slide flex-[0_0_100%]"> <div key={i} className="embla__slide flex-[0_0_100%]">
<img <img
src={item} src={item.path}
alt=""
className="size-full object-cover lg:max-h-[600px] lg:min-h-[320px]" className="size-full object-cover lg:max-h-[600px] lg:min-h-[320px]"
/> />
</div> </div>
) : ( ) : (
<Link <Link
key={i} key={i}
to={"/impressions"} to={item.link}
className="embla__slide flex-[0_0_100%]" className="embla__slide flex-[0_0_100%]"
> >
<img <img
src={item} src={item.path}
alt=""
className="size-full object-cover lg:max-h-[600px] lg:min-h-[320px]" className="size-full object-cover lg:max-h-[600px] lg:min-h-[320px]"
/> />
</Link> </Link>