From f36e7b8abb982a42cb6de3d75c1eb523af19f873 Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Fri, 20 May 2022 23:03:42 +0200
Subject: [PATCH] :sparkles: Made service name clickable

Co-authored-by: Bjorn L. <walkxnl@gmail.com>
---
 src/components/AppShelf/AppShelf.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 4d3fa553c..9d689e157 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
+import { Text, AspectRatio, Card, Image, Center, Grid, createStyles, Anchor } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
@@ -51,9 +51,15 @@ export function AppShelfItem(props: any) {
     >
       <Card withBorder radius="lg" shadow="md" className={classes.item}>
         <Card.Section>
-          <Text mt="sm" align="center" lineClamp={1} weight={550}>
-            {service.name}
-          </Text>
+          <Anchor
+            target="_blank"
+            href={service.url}
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            <Text mt="sm" align="center" lineClamp={1} weight={550}>
+              {service.name}
+            </Text>
+          </Anchor>
           <motion.div
             style={{
               position: 'absolute',