69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Section } from "@/components/ui/Section";
|
|
import { Heading, Text } from "@/components/ui/Typography";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import type { Product } from "lib/shopify/types";
|
|
import { ProductSlider } from "./ProductSlider";
|
|
|
|
interface ProductSliderSectionProps {
|
|
products: Product[];
|
|
}
|
|
|
|
/**
|
|
* Presentation component for the product slider section
|
|
* Handles the layout and presentation aspects, but not data fetching
|
|
*/
|
|
export function ProductSliderSection({ products }: ProductSliderSectionProps) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="overflow-x-hidden w-full">
|
|
<Section spacing="medium">
|
|
<div className="mb-8">
|
|
{/* Container for header section with relative positioning */}
|
|
<div className="relative">
|
|
{/* Button positioned absolutely to the right */}
|
|
<div className="hidden sm:block absolute right-0 bottom-[0px]">
|
|
<Button
|
|
href="/search"
|
|
variant="custom"
|
|
size="lg"
|
|
fullWidthMobile={false}
|
|
>
|
|
{t('productSlider.button')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Title and description */}
|
|
<div className="mb-4">
|
|
<Heading level={2}>{t('productSlider.title')}</Heading>
|
|
</div>
|
|
|
|
<div>
|
|
<Text size="lg" className="mb-4 sm:mb-0">{t('productSlider.description')}</Text>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile full-width button */}
|
|
<div className="sm:hidden mt-2">
|
|
<Button
|
|
href="/search"
|
|
variant="custom"
|
|
size="lg"
|
|
fullWidthMobile
|
|
>
|
|
{t('productSlider.button')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Carousel container s overflow da se vidi 4. proizvod */}
|
|
<div className="relative w-full overflow-visible">
|
|
<ProductSlider products={products} />
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|