slider product
This commit is contained in:
hamid zarghami
@@ -5,9 +5,13 @@ import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import DanakSuggestedService from './DanakSuggestedService'
|
||||
import { FC } from 'react'
|
||||
import DanakServices from './DanakServices'
|
||||
import { useGetSliderProducts } from './hooks/useProductData'
|
||||
import Link from 'next/link'
|
||||
|
||||
const Products: FC = () => {
|
||||
|
||||
const getSliderProducts = useGetSliderProducts()
|
||||
|
||||
return (
|
||||
<div className='max-w-maxWidth mx-auto'>
|
||||
<div className='flex justify-between mt-20 items-center'>
|
||||
@@ -25,141 +29,63 @@ const Products: FC = () => {
|
||||
spaceBetween={15}
|
||||
slidesPerView={'auto'}
|
||||
>
|
||||
<SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
|
||||
<div className='rounded-4xl overflow-hidden relative'>
|
||||
<Image
|
||||
src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
|
||||
alt='product'
|
||||
width={1080}
|
||||
height={1080}
|
||||
className='w-full h-[400px] object-cover'
|
||||
/>
|
||||
{
|
||||
getSliderProducts.data?.data?.danakServices?.map((item) => {
|
||||
return (
|
||||
<SwiperSlide key={item.id} className='xl:max-w-[45%] max-w-[90%]'>
|
||||
<div className='rounded-4xl overflow-hidden relative'>
|
||||
<Link href={`/products/${item.id}`}>
|
||||
<Image
|
||||
src={item.images[0].imageUrl}
|
||||
alt='product'
|
||||
width={1080}
|
||||
height={1080}
|
||||
className='w-full h-[400px] object-cover'
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className='absolute bottom-0 left-0 w-full modalGlass3 h-[150px] rounded-b-3xl text-white p-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h6 className='text-xs'>
|
||||
منو دیجیتال رستوران
|
||||
</h6>
|
||||
|
||||
<div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
|
||||
دسته بندی
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-between items-end'>
|
||||
<div className='flex gap-4'>
|
||||
<div className='size-14 bg-red-50 rounded-2xl'></div>
|
||||
<div>
|
||||
<h2 className='text-xl font-bold'>
|
||||
دی منو
|
||||
</h2>
|
||||
<div className='mt-1'>
|
||||
<h6 className='text-sm'>
|
||||
داناک
|
||||
<div className='absolute bottom-0 left-0 w-full modalGlass3 h-[150px] rounded-b-3xl text-white p-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h6 className='text-xs'>
|
||||
{item.name}
|
||||
</h6>
|
||||
|
||||
<div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
|
||||
{item.category.title}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-between items-end'>
|
||||
<div className='flex gap-4'>
|
||||
<div className='size-14 overflow-hidden rounded-2xl'>
|
||||
<Image src={item.icon} alt='product' width={1080} height={1080} className='w-full h-full object-cover' />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className='text-xl font-bold'>
|
||||
{item.title}
|
||||
</h2>
|
||||
<div className='mt-1'>
|
||||
<h6 className='text-sm'>
|
||||
داناک
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/products/${item.id}`}>
|
||||
<div className='flex gap-1.5 text-sm items-center'>
|
||||
<div>جزییات</div>
|
||||
<ArrowLeft
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1.5 text-sm items-center'>
|
||||
<div>جزییات</div>
|
||||
<ArrowLeft
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
|
||||
<div className='rounded-4xl overflow-hidden relative'>
|
||||
<Image
|
||||
src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
|
||||
alt='product'
|
||||
width={1080}
|
||||
height={1080}
|
||||
className='w-full h-[400px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='absolute bottom-0 left-0 w-full modalGlass3 h-[150px] rounded-b-3xl text-white p-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h6 className='text-xs'>
|
||||
منو دیجیتال رستوران
|
||||
</h6>
|
||||
|
||||
<div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
|
||||
دسته بندی
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-between items-end'>
|
||||
<div className='flex gap-4'>
|
||||
<div className='size-14 bg-red-50 rounded-2xl'></div>
|
||||
<div>
|
||||
<h2 className='text-xl font-bold'>
|
||||
دی منو
|
||||
</h2>
|
||||
<div className='mt-1'>
|
||||
<h6 className='text-sm'>
|
||||
داناک
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1.5 text-sm items-center'>
|
||||
<div>جزییات</div>
|
||||
<ArrowLeft
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
|
||||
<div className='rounded-4xl overflow-hidden relative'>
|
||||
<Image
|
||||
src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
|
||||
alt='product'
|
||||
width={1080}
|
||||
height={1080}
|
||||
className='w-full h-[400px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='absolute bottom-0 left-0 w-full modalGlass3 h-[150px] rounded-b-3xl text-white p-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h6 className='text-xs'>
|
||||
منو دیجیتال رستوران
|
||||
</h6>
|
||||
|
||||
<div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
|
||||
دسته بندی
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-between items-end'>
|
||||
<div className='flex gap-4'>
|
||||
<div className='size-14 bg-red-50 rounded-2xl'></div>
|
||||
<div>
|
||||
<h2 className='text-xl font-bold'>
|
||||
دی منو
|
||||
</h2>
|
||||
<div className='mt-1'>
|
||||
<h6 className='text-sm'>
|
||||
داناک
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-1.5 text-sm items-center'>
|
||||
<div>جزییات</div>
|
||||
<ArrowLeft
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</SwiperSlide>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -29,11 +29,22 @@ export const useGetCategories = () =>
|
||||
queryFn: () => api.getCategoriesPublic(),
|
||||
});
|
||||
|
||||
export const useGetSliderProducts = () =>
|
||||
useQuery({
|
||||
queryKey: ["slider-products"],
|
||||
queryFn: () => api.getSliderProducts(),
|
||||
});
|
||||
|
||||
export const categoriesQueryOptions = {
|
||||
queryKey: ["service-categories"],
|
||||
queryFn: () => api.getCategoriesPublic(),
|
||||
};
|
||||
|
||||
export const sliderProductsQueryOptions = {
|
||||
queryKey: ["slider-products"],
|
||||
queryFn: () => api.getSliderProducts(),
|
||||
};
|
||||
|
||||
export const useGetDetailService = (serviceId: string) =>
|
||||
useQuery({
|
||||
queryKey: ["service-detail", serviceId],
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Suspense } from 'react'
|
||||
import { HydrationBoundary } from '@tanstack/react-query'
|
||||
import { dehydrate } from '@tanstack/react-query'
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { categoriesQueryOptions, danakServiceSuggestedQueryOptions, servicesQueryOptions } from './hooks/useProductData'
|
||||
import { categoriesQueryOptions, danakServiceSuggestedQueryOptions, servicesQueryOptions, sliderProductsQueryOptions } from './hooks/useProductData'
|
||||
import Products from './ProductsPage'
|
||||
import Loading from './loading'
|
||||
|
||||
@@ -20,6 +20,7 @@ async function ProductsContent() {
|
||||
await queryClient.prefetchQuery(servicesQueryOptions)
|
||||
await queryClient.prefetchQuery(categoriesQueryOptions)
|
||||
await queryClient.prefetchQuery(danakServiceSuggestedQueryOptions)
|
||||
await queryClient.prefetchQuery(sliderProductsQueryOptions)
|
||||
|
||||
return (
|
||||
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
DanakServiceSuggestedResponse,
|
||||
ServiceDetailResponse,
|
||||
ServiceResponse,
|
||||
SliderProductResponse,
|
||||
} from "../types/ProductTypes";
|
||||
|
||||
export const getServicesByCategory = async (categoryId?: string) => {
|
||||
@@ -37,3 +38,10 @@ export const getDetailService = async (serviceId: string) => {
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getSliderProducts = async () => {
|
||||
const { data } = await axios.get<SliderProductResponse>(
|
||||
`/danak-services/slider`
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -88,3 +88,7 @@ export type ServiceDetailResponse = ApiResponse<{
|
||||
deletedAt: string | null;
|
||||
averageRating: number;
|
||||
}>;
|
||||
|
||||
export type SliderProductResponse = ApiResponse<{
|
||||
danakServices: DanakService[];
|
||||
}>;
|
||||
|
||||
Reference in New Issue
Block a user