97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import type { reviewsSchema } from '@/content.config'
|
|
import type { z } from 'astro:content'
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
import 'swiper/css'
|
|
import 'swiper/css/scrollbar'
|
|
import { Mousewheel, Scrollbar } from 'swiper/modules'
|
|
import StarIconSrc from '@/assets/icons/StarIcon.svg'
|
|
import { useTranslations } from '@/i18n/utils'
|
|
|
|
type Review = z.infer<ReturnType<typeof reviewsSchema>>
|
|
type ReviewsProps = {
|
|
reviews: Review[]
|
|
lang?: string
|
|
}
|
|
|
|
const REVIEWS_LINK =
|
|
'https://yandex.ru/maps/213/moscow/?ll=37.469982%2C55.781185&mode=poi&poi%5Bpoint%5D=37.469074%2C55.781319&poi%5Buri%5D=ymapsbm1%3A%2F%2Forg%3Foid%3D19715751392%26yclid%3D10576664134676381695%26banner_id%3D1873406736351323707&tab=reviews&z=17.75'
|
|
const swiperSlideClassName =
|
|
'!h-auto first:pl-0 last:pr-0 md:max-w-[600px] md:first:pl-24 md:last:pr-24'
|
|
|
|
export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
|
|
const t = useTranslations(lang)
|
|
|
|
return (
|
|
<Swiper
|
|
modules={[Scrollbar, Mousewheel]}
|
|
slidesPerView={1}
|
|
spaceBetween={24}
|
|
scrollbar={{
|
|
hide: true,
|
|
draggable: true,
|
|
}}
|
|
breakpoints={{
|
|
768: {
|
|
slidesPerView: 'auto',
|
|
},
|
|
}}
|
|
>
|
|
{reviews.map((review, index) => (
|
|
<SwiperSlide key={index} className={swiperSlideClassName}>
|
|
<div className="flex h-full flex-col gap-6 bg-bg-light p-6 md:px-14 md:py-16">
|
|
<div className="flex gap-1">
|
|
{[...Array(5)].map((_, i) => (
|
|
<img
|
|
key={i}
|
|
{...StarIconSrc}
|
|
alt="star"
|
|
loading="lazy"
|
|
className="h-5 w-5 text-yellow-400"
|
|
/>
|
|
))}
|
|
</div>
|
|
<blockquote className="break-words text-lg font-semibold text-text-light">
|
|
{review.review}
|
|
</blockquote>
|
|
<div className="mt-auto flex items-center gap-4">
|
|
<img
|
|
{...review.author.image}
|
|
alt={review.author.imageAlt}
|
|
loading="lazy"
|
|
className="h-16 w-16 rounded-full object-cover"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="font-semibold text-text-light">{review.author.name}</span>
|
|
<span>{review.author.description}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
<SwiperSlide className={swiperSlideClassName}>
|
|
<div className="h-full bg-bg-light transition-colors hover:bg-bg-light/80">
|
|
<a
|
|
href={REVIEWS_LINK}
|
|
target="_blank"
|
|
className="flex h-full w-full flex-col items-center justify-center gap-4 p-6 text-center md:px-14 md:py-16"
|
|
>
|
|
<span className="text-xl font-semibold text-text-light">
|
|
{t('reviews.viewMore.title')}
|
|
</span>
|
|
<span>{t('reviews.viewMore.description')}</span>
|
|
<svg
|
|
className="mt-2 h-6 w-6 text-text-light"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
)
|
|
}
|