responsive danak-services
This commit is contained in:
hamid zarghami
Generated
+12
-12
@@ -9,7 +9,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/react-query": "^5.73.3",
|
"@tanstack/react-query": "^5.73.3",
|
||||||
"@tanstack/react-query-devtools": "^5.73.3",
|
"@tanstack/react-query-devtools": "^5.74.3",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"iconsax-react": "^0.0.8",
|
"iconsax-react": "^0.0.8",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
@@ -1119,9 +1119,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/query-core": {
|
"node_modules/@tanstack/query-core": {
|
||||||
"version": "5.73.3",
|
"version": "5.74.3",
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.73.3.tgz",
|
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.3.tgz",
|
||||||
"integrity": "sha512-LUpsgVT3IkvOECdkQ3QD6esczSH71mAzH/LDZ2cu8j6w430v5W0JB1ulzsG8FFwFBd5fm/ePM2DFpg9TucRMgQ==",
|
"integrity": "sha512-Mqk+5o3qTuAiZML248XpNH8r2cOzl15+LTbUsZQEwvSvn1GU4VQhvqzAbil36p+MBxpr/58oBSnRzhrBevDhfg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
@@ -1139,12 +1139,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/react-query": {
|
"node_modules/@tanstack/react-query": {
|
||||||
"version": "5.73.3",
|
"version": "5.74.3",
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.73.3.tgz",
|
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.3.tgz",
|
||||||
"integrity": "sha512-umsAEsVsSSnrOZrstX/OlctdqkRZm6vPsetmbl241tdNo0jT3s+0bUoof9kCaTsPr/GopPlbJ1OYlrZj4toKzg==",
|
"integrity": "sha512-QrycUn0wxjVPzITvQvOxFRdhlAwIoOQSuav7qWD4SWCoKCdLbyRZ2vji2GuBq/glaxbF4wBx3fqcYRDOt8KDTA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/query-core": "5.73.3"
|
"@tanstack/query-core": "5.74.3"
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
@@ -1155,9 +1155,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/react-query-devtools": {
|
"node_modules/@tanstack/react-query-devtools": {
|
||||||
"version": "5.73.3",
|
"version": "5.74.3",
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.73.3.tgz",
|
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.74.3.tgz",
|
||||||
"integrity": "sha512-5YizhmYep/A9h5Z+aApHZd0rwNH3FQm6JzUQmdH+f8aG5joi2cRAq+3UakDH6wst2kysReEmW4n7PaMxfCEtRQ==",
|
"integrity": "sha512-H7TsOBB1fRCuuawrBzKMoIszqqILr2IN5oGLYMl7QG7ERJpMdc4hH8OwzBhVxJnmKeGwgtTQgcdKepfoJCWvFg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/query-devtools": "5.73.3"
|
"@tanstack/query-devtools": "5.73.3"
|
||||||
@@ -1167,7 +1167,7 @@
|
|||||||
"url": "https://github.com/sponsors/tannerlinsley"
|
"url": "https://github.com/sponsors/tannerlinsley"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@tanstack/react-query": "^5.73.3",
|
"@tanstack/react-query": "^5.74.3",
|
||||||
"react": "^18 || ^19"
|
"react": "^18 || ^19"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
@@ -10,7 +10,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/react-query": "^5.73.3",
|
"@tanstack/react-query": "^5.73.3",
|
||||||
"@tanstack/react-query-devtools": "^5.73.3",
|
"@tanstack/react-query-devtools": "^5.74.3",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"iconsax-react": "^0.0.8",
|
"iconsax-react": "^0.0.8",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import React from 'react'
|
|||||||
const DanakServices: NextPage = () => {
|
const DanakServices: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
<div className='mt-24'>
|
<div className='mt-24'>
|
||||||
<div className='flex items-center justify-between max-w-maxWidth mx-auto'>
|
<div className='flex gap-y-4 flex-col xl:flex-row xl:items-center justify-between max-w-maxWidth mx-auto'>
|
||||||
<h1 className='text-2xl font-bold'>
|
<h1 className='text-2xl font-bold'>
|
||||||
خدمات داناک
|
خدمات داناک
|
||||||
</h1>
|
</h1>
|
||||||
@@ -16,7 +16,7 @@ const DanakServices: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mt-20 flex gap-32 max-w-maxWidth mx-auto'>
|
<div className='mt-20 flex flex-col-reverse xl:flex-row gap-x-32 gap-y-12 max-w-maxWidth mx-auto'>
|
||||||
<div className='flex-1'>
|
<div className='flex-1'>
|
||||||
<div className='flex gap-4 items-center'>
|
<div className='flex gap-4 items-center'>
|
||||||
<div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
|
<div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
|
||||||
@@ -36,7 +36,7 @@ const DanakServices: NextPage = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex-1 p-4 bg-white/23 rounded-4xl border-[3px] border-white'>
|
<div className='flex-1 xl:p-4 p-2 bg-white/23 rounded-4xl border-[3px] border-white'>
|
||||||
<Image
|
<Image
|
||||||
src='https://picsum.photos/seed/picsum/200/300'
|
src='https://picsum.photos/seed/picsum/200/300'
|
||||||
alt='service-1'
|
alt='service-1'
|
||||||
@@ -47,15 +47,15 @@ const DanakServices: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='w-full xl:py-32 py-20 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
|
<div className='w-full xl:py-32 py-20 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
|
||||||
<div className='max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14'>
|
<div className='max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14'>
|
||||||
<div className='flex-1 p-4 bg-white/23 rounded-4xl border-[3px] border-white'>
|
<div className='flex-1 xl:p-4 p-2 bg-white/23 rounded-4xl border-[3px] border-white'>
|
||||||
<Image
|
<Image
|
||||||
src='https://picsum.photos/seed/picsum/200/300'
|
src='https://picsum.photos/seed/picsum/200/300'
|
||||||
alt='service-1'
|
alt='service-1'
|
||||||
width={300}
|
width={300}
|
||||||
height={300}
|
height={300}
|
||||||
className='w-full max-h-[300px] h-auto rounded-4xl'
|
className='min-w-full max-h-[300px] h-auto rounded-4xl'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -80,7 +80,7 @@ const DanakServices: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mt-20 flex gap-32 max-w-maxWidth mx-auto'>
|
<div className='mt-20 flex flex-col-reverse xl:flex-row gap-x-32 gap-y-12 max-w-maxWidth mx-auto'>
|
||||||
<div className='flex-1'>
|
<div className='flex-1'>
|
||||||
<div className='flex gap-4 items-center'>
|
<div className='flex gap-4 items-center'>
|
||||||
<div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
|
<div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
|
||||||
@@ -100,7 +100,7 @@ const DanakServices: NextPage = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex-1 p-4 bg-white/23 rounded-4xl border-[3px] border-white'>
|
<div className='flex-1 xl:p-4 p-2 bg-white/23 rounded-4xl border-[3px] border-white'>
|
||||||
<Image
|
<Image
|
||||||
src='https://picsum.photos/seed/picsum/200/300'
|
src='https://picsum.photos/seed/picsum/200/300'
|
||||||
alt='service-1'
|
alt='service-1'
|
||||||
@@ -113,13 +113,13 @@ const DanakServices: NextPage = () => {
|
|||||||
|
|
||||||
<div className='w-full xl:py-32 py-20 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
|
<div className='w-full xl:py-32 py-20 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
|
||||||
<div className='max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14'>
|
<div className='max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14'>
|
||||||
<div className='flex-1 p-4 bg-white/23 rounded-4xl border-[3px] border-white'>
|
<div className='flex-1 xl:p-4 p-2 bg-white/23 rounded-4xl border-[3px] border-white'>
|
||||||
<Image
|
<Image
|
||||||
src='https://picsum.photos/seed/picsum/200/300'
|
src='https://picsum.photos/seed/picsum/200/300'
|
||||||
alt='service-1'
|
alt='service-1'
|
||||||
width={300}
|
width={300}
|
||||||
height={300}
|
height={300}
|
||||||
className='w-full max-h-[300px] h-auto rounded-4xl'
|
className='min-w-full max-h-[300px] h-auto rounded-4xl'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,74 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import SectionHeader from '@/components/SectionHeader'
|
|
||||||
import ServiceItem from '@/components/ServiceItem'
|
|
||||||
import { clx } from '@/helpers/utils'
|
|
||||||
import { FC, useState } from 'react'
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
||||||
import { useGetLanding } from './hooks/useHomeData'
|
|
||||||
const DanakServices: FC = () => {
|
|
||||||
|
|
||||||
const { data } = useGetLanding()
|
|
||||||
const [categoryId, setCategoryId] = useState<string>('')
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='xl:mt-24 mt-12 max-w-maxWidth mx-auto'>
|
|
||||||
<SectionHeader
|
|
||||||
title='سرویس های داناک'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className='mt-6'>
|
|
||||||
<Swiper
|
|
||||||
className='w-full'
|
|
||||||
spaceBetween={15}
|
|
||||||
slidesPerView='auto'
|
|
||||||
>
|
|
||||||
<SwiperSlide className='max-w-[158px]'>
|
|
||||||
<div onClick={() => setCategoryId('')} className={clx(
|
|
||||||
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
|
||||||
'' === categoryId && 'bg-white'
|
|
||||||
)}>
|
|
||||||
<div className='text-sm'>
|
|
||||||
همه
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SwiperSlide>
|
|
||||||
<SwiperSlide className='max-w-[158px]'>
|
|
||||||
<div onClick={() => setCategoryId('1')} className={clx(
|
|
||||||
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
|
||||||
'1' === categoryId && 'bg-white'
|
|
||||||
)}>
|
|
||||||
<div className='size-5 rounded-full bg-blue-100'>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className='text-sm'>
|
|
||||||
ابزارهای کاربردی
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SwiperSlide>
|
|
||||||
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='xl:mt-16 mt-10 flex flex-wrap gap-8'>
|
|
||||||
|
|
||||||
<div className='xl:min-w-[30%] min-w-[70%] flex-1'>
|
|
||||||
<ServiceItem
|
|
||||||
isShort
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='xl:min-w-[30%] min-w-[70%] flex-1'>
|
|
||||||
<ServiceItem
|
|
||||||
isShort
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='xl:min-w-[30%] min-w-[70%] flex-1'>
|
|
||||||
<ServiceItem
|
|
||||||
isShort
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DanakServices
|
|
||||||
@@ -1,14 +1,12 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import * as api from "../service/HomeService";
|
import * as api from "../service/HomeService";
|
||||||
|
|
||||||
// برای client
|
|
||||||
export const useGetLanding = () =>
|
export const useGetLanding = () =>
|
||||||
useQuery({
|
useQuery({
|
||||||
queryKey: ["landing"],
|
queryKey: ["landing"],
|
||||||
queryFn: api.getLanding,
|
queryFn: api.getLanding,
|
||||||
});
|
});
|
||||||
|
|
||||||
// برای server prefetch
|
|
||||||
export const landingQueryOptions = {
|
export const landingQueryOptions = {
|
||||||
queryKey: ["landing"],
|
queryKey: ["landing"],
|
||||||
queryFn: api.getLanding,
|
queryFn: api.getLanding,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Blog } from "@/app/blogs/types/BlogTypes";
|
import { Blog } from "@/app/blogs/types/BlogTypes";
|
||||||
|
import { ServiceCategoryType } from "@/app/products/types/ProductTypes";
|
||||||
export interface LandingResponse {
|
export interface LandingResponse {
|
||||||
statusCode: number;
|
statusCode: number;
|
||||||
success: boolean;
|
success: boolean;
|
||||||
@@ -40,4 +40,5 @@ export interface DanakSuggestService {
|
|||||||
link: string;
|
link: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
deletedAt: string | null;
|
deletedAt: string | null;
|
||||||
|
category: ServiceCategoryType;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,8 @@ import "@/assets/fonts/irancell/style.css";
|
|||||||
import Header from "@/shared/Header";
|
import Header from "@/shared/Header";
|
||||||
import Footer from "@/shared/Footer";
|
import Footer from "@/shared/Footer";
|
||||||
import SideBar from "@/shared/SideBar";
|
import SideBar from "@/shared/SideBar";
|
||||||
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||||
|
|
||||||
import QueryProvider from "@/config/QueryProvider";
|
import QueryProvider from "@/config/QueryProvider";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
@@ -40,6 +42,8 @@ export default function RootLayout({
|
|||||||
{children}
|
{children}
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
<ReactQueryDevtools initialIsOpen={false} />
|
||||||
|
|
||||||
</QueryProvider>
|
</QueryProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,78 @@
|
|||||||
|
'use client'
|
||||||
|
import SectionHeader from '@/components/SectionHeader'
|
||||||
|
import ServiceItem from '@/components/ServiceItem'
|
||||||
|
import { clx } from '@/helpers/utils'
|
||||||
|
import { FC, useState } from 'react'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||||
|
import { useGetCategories, useGetServicesByCategory } from './hooks/useProductData'
|
||||||
|
import Image from 'next/image'
|
||||||
|
const DanakServices: FC = () => {
|
||||||
|
|
||||||
|
const [categoryId, setCategoryId] = useState<string>('')
|
||||||
|
const { data: categories } = useGetCategories()
|
||||||
|
const { data } = useGetServicesByCategory(categoryId)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='xl:mt-24 mt-12 max-w-maxWidth mx-auto'>
|
||||||
|
<SectionHeader
|
||||||
|
title='سرویس های داناک'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='mt-6'>
|
||||||
|
<Swiper
|
||||||
|
className='w-full'
|
||||||
|
spaceBetween={15}
|
||||||
|
slidesPerView='auto'
|
||||||
|
>
|
||||||
|
<SwiperSlide className='max-w-[158px]'>
|
||||||
|
<div onClick={() => setCategoryId('')} className={clx(
|
||||||
|
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
||||||
|
'' === categoryId && 'bg-white'
|
||||||
|
)}>
|
||||||
|
<div className='text-sm'>
|
||||||
|
همه
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
{
|
||||||
|
categories?.data?.categories?.map((item) => {
|
||||||
|
return (
|
||||||
|
<SwiperSlide className='max-w-[158px]' key={item.id}>
|
||||||
|
<div onClick={() => setCategoryId(item.id)} className={clx(
|
||||||
|
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
||||||
|
item.id === categoryId && 'bg-white'
|
||||||
|
)}>
|
||||||
|
<div className='size-5 rounded-full overflow-hidden bg-blue-100'>
|
||||||
|
<Image src={item.icon} alt={item.title} width={20} height={20} />
|
||||||
|
</div>
|
||||||
|
<div className='text-sm'>
|
||||||
|
{item.title}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='xl:mt-16 mt-10 flex flex-wrap gap-8'>
|
||||||
|
{data?.data?.services?.map((item) => {
|
||||||
|
return (
|
||||||
|
<div key={item.id} className='xl:min-w-[30%] min-w-[70%] flex-1'>
|
||||||
|
<ServiceItem
|
||||||
|
isShort
|
||||||
|
item={item}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
<div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
|
||||||
|
<div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DanakServices
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
'use client'
|
||||||
|
import { ArrowLeft } from 'iconsax-react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||||
|
import DanakSuggestedService from '../home/DanakSuggestedService'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import DanakServices from './DanakServices'
|
||||||
|
|
||||||
|
const Products: FC = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='max-w-maxWidth mx-auto'>
|
||||||
|
<div className='flex justify-between mt-20 items-center'>
|
||||||
|
<h1 className='text-2xl font-bold'>
|
||||||
|
محصولات
|
||||||
|
</h1>
|
||||||
|
<div className='max-w-[320px] text-sm leading-6 hidden xl:block text-center xl:text-right'>
|
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mt-20'>
|
||||||
|
<Swiper
|
||||||
|
className='w-full'
|
||||||
|
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'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DanakSuggestedService />
|
||||||
|
|
||||||
|
<DanakServices />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Products
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import * as api from "../service/ProductService";
|
||||||
|
|
||||||
|
export const useGetServicesByCategory = (categoryId?: string) =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: ["services", categoryId],
|
||||||
|
queryFn: () => api.getServicesByCategory(categoryId),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const servicesQueryOptions = {
|
||||||
|
queryKey: ["services", ""],
|
||||||
|
queryFn: () => api.getServicesByCategory(undefined),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useGetCategories = () =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: ["service-categories"],
|
||||||
|
queryFn: () => api.getCategoriesPublic(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const categoriesQueryOptions = {
|
||||||
|
queryKey: ["service-categories"],
|
||||||
|
queryFn: () => api.getCategoriesPublic(),
|
||||||
|
};
|
||||||
+14
-168
@@ -1,172 +1,18 @@
|
|||||||
'use client'
|
import { NextPage } from 'next'
|
||||||
import { ArrowLeft } from 'iconsax-react'
|
import { HydrationBoundary } from '@tanstack/react-query'
|
||||||
import Image from 'next/image'
|
import { dehydrate } from '@tanstack/react-query'
|
||||||
import { FC } from 'react'
|
import { QueryClient } from '@tanstack/react-query'
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
import { categoriesQueryOptions, servicesQueryOptions } from './hooks/useProductData'
|
||||||
import DanakSuggestedService from '../home/DanakSuggestedService'
|
import Products from './Products'
|
||||||
import DanakServices from '../home/DanakServices'
|
const ProductsPage: NextPage = async () => {
|
||||||
|
const queryClient = new QueryClient()
|
||||||
const Products: FC = () => {
|
await queryClient.prefetchQuery(servicesQueryOptions)
|
||||||
|
await queryClient.prefetchQuery(categoriesQueryOptions)
|
||||||
return (
|
return (
|
||||||
<div className='max-w-maxWidth mx-auto'>
|
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||||
<div className='flex justify-between mt-20 items-center'>
|
<Products />
|
||||||
<h1 className='text-2xl font-bold'>
|
</HydrationBoundary>
|
||||||
محصولات
|
|
||||||
</h1>
|
|
||||||
<div className='max-w-[320px] text-sm leading-6 hidden xl:block text-center xl:text-right'>
|
|
||||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-20'>
|
|
||||||
<Swiper
|
|
||||||
className='w-full'
|
|
||||||
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'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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 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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DanakSuggestedService />
|
|
||||||
|
|
||||||
<DanakServices />
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Products
|
export default ProductsPage
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import axios from "@/config/axios";
|
||||||
|
import { CategoryResponse, ServiceResponse } from "../types/ProductTypes";
|
||||||
|
|
||||||
|
export const getServicesByCategory = async (categoryId?: string) => {
|
||||||
|
let query = ``;
|
||||||
|
if (categoryId) {
|
||||||
|
query = `?categoryId=${categoryId}`;
|
||||||
|
}
|
||||||
|
const { data } = await axios.get<ServiceResponse>(
|
||||||
|
`/danak-services/public${query}`
|
||||||
|
);
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCategoriesPublic = async () => {
|
||||||
|
const { data } = await axios.get<CategoryResponse>(
|
||||||
|
`/danak-services/categories/public`
|
||||||
|
);
|
||||||
|
return data;
|
||||||
|
};
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { DanakSuggestService } from "@/app/home/types/HomeTypes";
|
||||||
|
import { ApiResponse } from "@/shared/types/SharedTypes";
|
||||||
|
|
||||||
|
export type ServiceResponse = ApiResponse<{
|
||||||
|
services: DanakSuggestService[];
|
||||||
|
nextPage: boolean;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export type CategoryResponse = ApiResponse<{
|
||||||
|
categories: ServiceCategoryType[];
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export type ServiceCategoryType = {
|
||||||
|
id: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
title: string;
|
||||||
|
icon: string;
|
||||||
|
isActive: boolean;
|
||||||
|
order: number;
|
||||||
|
parentId: string | null;
|
||||||
|
deletedAt: string | null;
|
||||||
|
};
|
||||||
@@ -16,7 +16,7 @@ const ServiceItem: FC<Props> = (props) => {
|
|||||||
<Image src={props.item.icon} className='size-full object-cover' alt={props.item.name} width={65} height={65} />
|
<Image src={props.item.icon} className='size-full object-cover' alt={props.item.name} width={65} height={65} />
|
||||||
</div>
|
</div>
|
||||||
<div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
|
<div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
|
||||||
دسته بندی
|
{props.item.category?.title}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user