From 0302299bf1165dd4c7cad5c4da1124d9a2c84718 Mon Sep 17 00:00:00 2001
From: AmirGoodarzi <amirgoodarzi.web@gmail.com>
Date: Sat, 3 May 2025 21:27:22 +0330
Subject: [PATCH] Add dynamic link to sliders -- improve slider styles

---
 package.json                                |  2 +-
 src/pages/explore/+components/TopSlider.tsx | 31 +++++++++++++++++----
 src/services/Advertisement.tsx              |  4 ++-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 91f2f2c..38c45df 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "enduser.salona",
   "private": true,
-  "version": "0.9.1",
+  "version": "0.9.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/pages/explore/+components/TopSlider.tsx b/src/pages/explore/+components/TopSlider.tsx
index 51bcfb2..e77198d 100644
--- a/src/pages/explore/+components/TopSlider.tsx
+++ b/src/pages/explore/+components/TopSlider.tsx
@@ -2,9 +2,22 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination, Autoplay } from 'swiper/modules';
 import { useGetAdsBanner } from '@/services/Advertisement';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useNavigate } from 'react-router-dom';
 
 const TopSlider = () => {
+  const navigate = useNavigate();
   const { data, isLoading } = useGetAdsBanner();
+  const onNavigateToLink = (link: string) => {
+    if (link.includes(location.origin)) {
+      // is internal link
+      // so we can navigate
+      const path = link.replace(location.origin, '');
+      navigate(path);
+    } else {
+      location.href = link;
+    }
+  };
+
   return (
     <Swiper
       pagination={true}
@@ -20,12 +33,18 @@ const TopSlider = () => {
           <Skeleton className="aspect-video" />
         </div>
       ) : (
-        data?.map((image, index) => (
-          <SwiperSlide key={index} className="p-3 aspect-video">
-            <img
-              src={image}
-              className="size-full object-cover rounded-lg shadow-sm border border-gray-100"
-            />
+        data?.map((item, index) => (
+          <SwiperSlide key={index} className="p-3">
+            <div
+              className="size-full rounded-lg shadow-sm border border-gray-100 overflow-hidden aspect-video cursor-pointer"
+              onClick={() => {
+                setTimeout(() => {
+                  if (item.link) onNavigateToLink(item.link);
+                }, 0);
+              }}
+            >
+              <img src={item.image} width="100%" height="100%" />
+            </div>
           </SwiperSlide>
         ))
       )}
diff --git a/src/services/Advertisement.tsx b/src/services/Advertisement.tsx
index 447a761..c1b71ee 100644
--- a/src/services/Advertisement.tsx
+++ b/src/services/Advertisement.tsx
@@ -5,7 +5,9 @@ import { queryKeys } from '@/utils/queryKeys';
 export const useGetAdsBanner = () => {
   return useQuery({
     queryKey: [queryKeys.ADS],
-    queryFn: async (): Promise<string[] | undefined> => {
+    queryFn: async (): Promise<
+      Array<{ image: string; link: string }> | undefined
+    > => {
       const { data } = await client.get('/get_advertising_banner', {
         headers: {
           hideSwal: true,