107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Section } from "@/components/ui/Section";
|
|
import { Heading, Text } from "@/components/ui/Typography";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { container } from "@/lib/utils";
|
|
|
|
// Define the review data structure
|
|
interface Review {
|
|
id: number;
|
|
author: string;
|
|
comment: string;
|
|
}
|
|
|
|
export function CustomerReviews() {
|
|
const { t, locale } = useTranslation();
|
|
|
|
// Definiraj reviewse po jeziku
|
|
const reviews: Review[] = locale === 'en' ? [
|
|
{
|
|
id: 1,
|
|
author: "Emily Johnson",
|
|
comment: "\"The Build a Box feature made gift-giving so easy and special!\""
|
|
},
|
|
{
|
|
id: 2,
|
|
author: "Michael Smith",
|
|
comment: "\"Sent's service exceeded my expectations every time!\""
|
|
},
|
|
{
|
|
id: 3,
|
|
author: "Sarah Lee",
|
|
comment: "\"The quality of the items was outstanding!\""
|
|
}
|
|
] : [
|
|
{
|
|
id: 1,
|
|
author: "Ana Kovačić",
|
|
comment: "\"Opcija 'Složi kutiju' učinila je darivanje tako jednostavnim i posebnim!\""
|
|
},
|
|
{
|
|
id: 2,
|
|
author: "Marko Horvat",
|
|
comment: "\"Usluga Sent-a nadmašila je moja očekivanja svaki put!\""
|
|
},
|
|
{
|
|
id: 3,
|
|
author: "Ivana Novak",
|
|
comment: "\"Kvaliteta proizvoda bila je izvanredna!\""
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Section className="bg-white overflow-hidden">
|
|
{/* Keep the heading inside container */}
|
|
<div className={container}>
|
|
<Heading level={2} className="text-center mb-[60px]">
|
|
{t('customerReviews.title')}
|
|
</Heading>
|
|
|
|
{/* Mobile: Full width scrollable container, Desktop: Grid */}
|
|
<div className="md:hidden -mx-4">
|
|
<div className="flex overflow-x-auto pb-6 px-4 snap-x no-scrollbar">
|
|
{/* Add empty div at start to ensure space */}
|
|
<div className="shrink-0 w-[5%]"></div>
|
|
|
|
{reviews.map((review) => (
|
|
<div
|
|
key={review.id}
|
|
className="bg-secondary shrink-0 w-[85%] sm:w-[70%] h-[235px] p-8 flex flex-col snap-center mx-3"
|
|
>
|
|
<Text className="mb-6 flex-grow">
|
|
{review.comment}
|
|
</Text>
|
|
|
|
<div className="mt-auto">
|
|
<Text className="text-primary font-bold">{review.author}</Text>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Add empty div at end to ensure space */}
|
|
<div className="shrink-0 w-[5%]"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop: Original grid layout */}
|
|
<div className="hidden md:grid md:grid-cols-3 gap-8">
|
|
{reviews.map((review) => (
|
|
<div
|
|
key={review.id}
|
|
className="bg-secondary h-[235px] p-8 flex flex-col"
|
|
>
|
|
<Text className="mb-6 flex-grow">
|
|
{review.comment}
|
|
</Text>
|
|
|
|
<div className="mt-auto">
|
|
<Text className="text-primary font-bold">{review.author}</Text>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|