added ServiceList.tsx for handling individual services

app/components/Services.tsx

@@ -10,6 +10,7 @@ import { styled } from '@mui/material/styles';
 import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
 import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
 import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
+import ServiceList from "~/components/ServiceList";
 
 const services = {
   media: [
@@ -32,26 +33,34 @@ const items = [
   {
     icon: <ViewQuiltRoundedIcon />,
     title: 'Dashboard',
+    serviceList: [
+        { name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
+        { name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
+        { name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
+        { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
+    ],
     description:
       'This item could provide a snapshot of the most important metrics or data points related to the product.',
-    imageLight: "url('/extended_sigil.png')",
-    imageDark: "url('/extended_sigil.png')",
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
     title: 'Mobile integration',
+    serviceList: [
+        { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
+        { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
+        { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
+    ],
     description:
       'This item could provide information about the mobile app version of the product.',
-    imageLight: "url('/extended_sigil.png')",
-    imageDark: "url('/extended_sigil.png')",
   },
   {
     icon: <DevicesRoundedIcon />,
     title: 'Available on all platforms',
+    serviceList:[
+        { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
+    ],
     description:
       'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
-    imageLight: "url('/extended_sigil.png')",
-    imageDark: "url('/extended_sigil.png')",
   },
 ];
 
@@ -114,26 +123,7 @@ export function MobileLayout({
         ))}
       </Box>
       <Card variant="outlined">
-        <Box
-          sx={(theme) => ({
-            mb: 2,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            minHeight: 280,
-            backgroundImage: 'var(--items-imageLight)',
-            ...theme.applyStyles('dark', {
-              backgroundImage: 'var(--items-imageDark)',
-            }),
-          })}
-          style={
-            items[selectedItemIndex]
-              ? ({
-                  '--items-imageLight': items[selectedItemIndex].imageLight,
-                  '--items-imageDark': items[selectedItemIndex].imageDark,
-                } as any)
-              : {}
-          }
-        />
+        <ServiceList serviceList={selectedFeature.serviceList} />
         <Box sx={{ px: 2, pb: 2 }}>
           <Typography
             gutterBottom
@@ -237,32 +227,11 @@ export default function Services() {
           <Card
             variant="outlined"
             sx={{
-              height: '100%',
-              width: '100%',
               display: { xs: 'none', sm: 'flex' },
               pointerEvents: 'none',
             }}
           >
-            <Box
-              sx={(theme) => ({
-                m: 'auto',
-                width: 420,
-                height: 500,
-                backgroundSize: 'contain',
-                backgroundImage: 'var(--items-imageLight)',
-                ...theme.applyStyles('dark', {
-                  backgroundImage: 'var(--items-imageDark)',
-                }),
-              })}
-              style={
-                items[selectedItemIndex]
-                  ? ({
-                      '--items-imageLight': items[selectedItemIndex].imageLight,
-                      '--items-imageDark': items[selectedItemIndex].imageDark,
-                    } as any)
-                  : {}
-              }
-            />
+          <ServiceList serviceList={selectedFeature.serviceList} />
           </Card>
         </Box>
       </Box>