From ce0a7c43c0ee3a3f1c24cada318e489f86c21833 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 23 Dec 2022 18:41:10 +0100
Subject: [PATCH] Added usage of MobileCard type on Service page

---
 pages/services.tsx | 47 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/pages/services.tsx b/pages/services.tsx
index 9a24a5a..25436b5 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -4,31 +4,54 @@ import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
 import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import ServiceList from '../public/pages.json';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingFull, error } = useServices();
+  const isMobile = useWindowSize();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
   else if (loadingFull) {
-    content =
-      <PageContentBox>
-        {initialData?.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else if (fullData) {
-    content =
-      <PageContentBox>
-        {fullData.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else {
     content = <div>Error loading data</div>