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