Add component for service list

1 files changed, 62 insertions, 0 deletions

diff --git a/src/components/service.tsx b/src/components/service.tsx
new file mode 100644
index 0000000..57ec6ab
--- /dev/null
+++ b/src/components/service.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { capitalize } from '../utils';
+
+export type ServiceProps = {
+    name: string;
+    description: string;
+    url: string;
+    tags: string[];
+}
+
+const ServiceCard = styled.a`
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    color: #000;
+    text-decoration: none;
+    transition: filter 0.2s, transform 0.2s;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+        filter: brightness(0.9);
+        transform: translateY(-5px);
+    }
+`;
+
+const DimmedURL = styled.span`
+    color: #999;
+    font-size: 0.9em;
+    font-family: monospace;
+`;
+
+export const Tag = styled.span`
+    background-color: #c4c4c4;
+    color: #000;
+    font-weight: 600;
+    font-family: monospace;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    display: inline-block;
+`;
+
+const Service: React.FC<ServiceProps> = ({ name, description, url, tags }) => {
+    return (
+        <ServiceCard href={url}>
+            <h3>{name}</h3>
+            <p>{description}</p>
+            <div>
+                {
+                    tags.map((tag, index) => (
+                        <Tag key={index}>{capitalize(tag)}</Tag>
+                    ))
+                }
+            </div>
+            <DimmedURL>{url}</DimmedURL>
+        </ServiceCard>
+    );
+}
+
+export default Service;