Remove tags from service cards

2 files changed, 18 insertions, 21 deletions

diff --git a/src/components/service.tsx b/src/components/service.tsx
index b350d3a..0ff9179 100644
--- a/src/components/service.tsx
+++ b/src/components/service.tsx
@@ -11,6 +11,13 @@ export type ServiceProps = {
     image: string;
 }
 
+const DimmedURL = styled.p`
+    color: #666;
+    font-size: 0.8em;
+    margin-top: 10px;
+    font-family: monospace;
+`;
+
 const ServiceCard = styled.a`
     background-color: #fff;
     border-radius: 10px;
@@ -27,17 +34,6 @@ const ServiceCard = styled.a`
     }
 `;
 
-export const Tag = styled.span`
-    background-color: rgba(110, 119, 255, 0.39);
-    color: #000;
-    font-weight: 600;
-    font-family: monospace;
-    border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
-    display: inline-block;
-`;
-
 const ServiceImage = styled.img`
     border-radius: 10px;
     width: 80px;
@@ -52,19 +48,13 @@ const ServiceDescription = styled.p`
 `;
 
 
-const Service: React.FC<ServiceProps> = ({ name, description, url, tags, image }) => {
+const Service: React.FC<ServiceProps> = ({ name, description, url, image }) => {
     return (
         <ServiceCard href={url}>
             <ServiceImage src={image} alt={name} />
             <ServiceHeader>{name}</ServiceHeader>
             <ServiceDescription>{description}</ServiceDescription>
-            <div>
-                {
-                    tags.map((tag, index) => (
-                        <Tag key={index}>{capitalize(tag)}</Tag>
-                    ))
-                }
-            </div>
+            <DimmedURL>{url}</DimmedURL>
         </ServiceCard>
     );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7827a7b..ae4b6dc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import { graphql, type HeadFC, type PageProps } from "gatsby"
 
 import PageLayout, { generateHeader } from "../layout/page";
 
-import Service, { ServiceProps, Tag } from "../components/service";
+import Service, { ServiceProps } from "../components/service";
 import styled from "styled-components";
 import { capitalize } from "../utils";
 
@@ -33,7 +33,14 @@ const ServicesHolder = styled.div`
   margin-top: 20px;
 `;
 
-const LargerTag = styled(Tag)`
+const LargerTag = styled.span`
+  color: #000;
+  font-weight: 600;
+  font-family: monospace;
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
   font-size: 1.2em;
   transition: filter 0.2s, transform 0.2s;
   cursor: pointer;