List services on home page

1 files changed, 75 insertions, 2 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6cc57d8..71b9312 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,70 @@
 import * as React from "react"
-import type { HeadFC, PageProps } from "gatsby"
+import { graphql, type HeadFC, type PageProps } from "gatsby"
 
 import PageLayout, { generateHeader } from "../layout/page";
 
+import Service, { ServiceProps, Tag } from "../components/service";
+import styled from "styled-components";
+import { capitalize } from "../utils";
+
+type IndexPageProps = {
+  data: {
+    services: {
+      nodes: ServiceProps[],
+      tags: string[]
+    }
+  }
+}
+
+const ServicesHolder = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+`;
+
+const LargerTag = styled(Tag)`
+  font-size: 1.2em;
+  transition: filter 0.2s, transform 0.2s;
+  cursor: pointer;
+
+  @media (max-width: 600px) {
+    font-size: 1em;
+  }
+
+  &:hover {
+    filter: brightness(0.9);
+    transform: translateY(-2px);
+  
+  }
+
+  &.active {
+    background-color: #333;
+    color: #fff;
+  }
+`
+
+const IndexPage: React.FC<IndexPageProps> = ({ data }) => {
+  const [selectedTag, setSelectedTag] = React.useState<string | null>(null);
 
-const IndexPage: React.FC<PageProps> = () => {
   return (
     <PageLayout header="Available Services" subheader="Below are all the internal services for Python Discord">
       <main>
+        <div>
+          <LargerTag onClick={() => setSelectedTag(null)} className={selectedTag == null ? "active" : ""}>All</LargerTag>
+          {data.services.tags.map((tag, index) => (
+            <LargerTag onClick={() => setSelectedTag(tag)} className={tag == selectedTag ? "active" : ""} key={index}>{capitalize(tag)}</LargerTag>
+          ))}
+        </div>
+        <ServicesHolder>
+          {data.services.nodes.sort().filter(
+            service => selectedTag ? service.tags.includes(selectedTag) : true
+          ).sort()
+            .map((service, index) => (
+              <Service key={index} {...service} />
+            ))}
+        </ServicesHolder>
+
       </main>
     </PageLayout>
   )
@@ -16,3 +73,19 @@ const IndexPage: React.FC<PageProps> = () => {
 export default IndexPage
 
 export const Head: HeadFC = generateHeader("Home", "Internal services for Python Discord.");
+
+export const query = graphql`
+  query {
+    services: allServicesYaml {
+      nodes {
+        name
+        description
+        url
+        tags
+      }
+
+      tags: distinct(field: {tags: SELECT})
+    }
+  }
+`
+