diff options
| -rw-r--r-- | src/components/service.tsx | 30 | ||||
| -rw-r--r-- | src/layout/page.tsx | 2 | ||||
| -rw-r--r-- | src/pages/index.tsx | 37 |
3 files changed, 55 insertions, 14 deletions
diff --git a/src/components/service.tsx b/src/components/service.tsx index 79b8648..b350d3a 100644 --- a/src/components/service.tsx +++ b/src/components/service.tsx @@ -3,10 +3,12 @@ import styled from 'styled-components'; import { capitalize } from '../utils'; export type ServiceProps = { + slug: string; name: string; description: string; url: string; tags: string[]; + image: string; } const ServiceCard = styled.a` @@ -25,12 +27,6 @@ const ServiceCard = styled.a` } `; -const DimmedURL = styled.span` - color: #999; - font-size: 0.9em; - font-family: monospace; -`; - export const Tag = styled.span` background-color: rgba(110, 119, 255, 0.39); color: #000; @@ -42,11 +38,26 @@ export const Tag = styled.span` display: inline-block; `; -const Service: React.FC<ServiceProps> = ({ name, description, url, tags }) => { +const ServiceImage = styled.img` + border-radius: 10px; + width: 80px; +`; + +const ServiceHeader = styled.h3` + margin: 0; +`; + +const ServiceDescription = styled.p` + margin: 0; +`; + + +const Service: React.FC<ServiceProps> = ({ name, description, url, tags, image }) => { return ( <ServiceCard href={url}> - <h3>{name}</h3> - <p>{description}</p> + <ServiceImage src={image} alt={name} /> + <ServiceHeader>{name}</ServiceHeader> + <ServiceDescription>{description}</ServiceDescription> <div> { tags.map((tag, index) => ( @@ -54,7 +65,6 @@ const Service: React.FC<ServiceProps> = ({ name, description, url, tags }) => { )) } </div> - <DimmedURL>{url}</DimmedURL> </ServiceCard> ); } diff --git a/src/layout/page.tsx b/src/layout/page.tsx index 2bfec09..2245bcb 100644 --- a/src/layout/page.tsx +++ b/src/layout/page.tsx @@ -28,7 +28,7 @@ const GlobalStyle = createGlobalStyle` const CenterImage = styled.img` display: block; margin: 0 auto; - margin-top: 50px; + margin-top: 10px; width: 70%; height: auto; max-width: 600px; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2099902..7827a7b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,14 +12,24 @@ type IndexPageProps = { services: { nodes: ServiceProps[], tags: string[] + }, + images: { + nodes: { + name: string, + childImageSharp: { + resize: { + src: string + } + } + }[] } } } const ServicesHolder = styled.div` display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 10px; margin-top: 20px; `; @@ -50,6 +60,15 @@ const LargerTag = styled(Tag)` const IndexPage: React.FC<IndexPageProps> = ({ data }) => { const [selectedTag, setSelectedTag] = React.useState<string | null>(null); + + const serviceImageMap: Record<string, string> = {}; + + data.images.nodes.forEach((node) => { + serviceImageMap[node.name] = node.childImageSharp.resize.src; + }); + + console.log(data.services) + return ( <PageLayout header="Available Services" subheader="Below are all the internal services for Python Discord"> <main> @@ -64,7 +83,7 @@ const IndexPage: React.FC<IndexPageProps> = ({ data }) => { service => selectedTag ? service.tags.includes(selectedTag) : true ).sort((a, b) => a.name.localeCompare(b.name)) .map((service, index) => ( - <Service key={index} {...service} /> + <Service key={index} {...service} image={serviceImageMap[service.slug] ? serviceImageMap[service.slug] : serviceImageMap["unknown"]} /> ))} </ServicesHolder> @@ -81,6 +100,7 @@ export const query = graphql` query { services: allServicesYaml { nodes { + slug name description url @@ -89,6 +109,17 @@ export const query = graphql` tags: distinct(field: {tags: SELECT}) } + + images: allFile(filter: {sourceInstanceName: {eq: "service_images"}}) { + nodes { + name + childImageSharp { + resize(height: 80, quality: 100) { + src + } + } + } + } } ` |