2f4e0d59aa
remove unused abonements API configuration and endpoints add escape key handler for drawer component implement text truncation for service descriptions sync swiper navigation between service tabs and content add static gym rental service to services list
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import type { servicesSchema } from '@/content.config'
|
|
import type { z } from 'astro:content'
|
|
import { useCallback, useRef, useState } from 'react'
|
|
import { type SwiperRef, SwiperSlide } from 'swiper/react'
|
|
import { CharachteristicCard } from './CharachteristicCard'
|
|
import { cn } from '@/libs/cn'
|
|
import { SimpleSwiper } from '../swiper/SimpleSwiper'
|
|
import React from 'react'
|
|
|
|
export type ServicesProps = {
|
|
services: z.infer<typeof servicesSchema>[]
|
|
}
|
|
|
|
export const Services: React.FC<ServicesProps> = ({ services }) => {
|
|
const swiperRef = useRef<SwiperRef | null>(null)
|
|
const tagSwiper = useRef<SwiperRef | null>(null)
|
|
const [serviceId, setServiceId] = useState(0)
|
|
const selectedService = services[serviceId]
|
|
const isSelected = (index: number) => index === serviceId
|
|
const updateServiceHandler = useCallback((index: number) => {
|
|
setServiceId(index)
|
|
swiperRef.current?.swiper.slideTo(0)
|
|
tagSwiper.current?.swiper.slideTo(index)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
<SimpleSwiper spaceBetween={8} ref={tagSwiper}>
|
|
{services.map((service, index) => (
|
|
<SwiperSlide style={{ width: 'auto' }} key={index}>
|
|
<button
|
|
className={cn('tag-btn', isSelected(index) && 'tag-btn-active')}
|
|
onClick={() => updateServiceHandler(index)}
|
|
>
|
|
{service.title}
|
|
</button>
|
|
</SwiperSlide>
|
|
))}
|
|
</SimpleSwiper>
|
|
<SimpleSwiper ref={swiperRef}>
|
|
{selectedService.charachteristics?.map((charachteristic, index) => (
|
|
<SwiperSlide
|
|
className="aspect-3/4 !h-auto w-full max-w-[280px] md:max-w-[320px]"
|
|
key={index}
|
|
>
|
|
<CharachteristicCard
|
|
{...charachteristic}
|
|
link={charachteristic.link || selectedService.link}
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
</SimpleSwiper>
|
|
</div>
|
|
)
|
|
}
|