Merge pull request #8685 from TylerAPfledderer/refactor/products-card-chakra

Refactor: Migrate `ProductCard` to Chakra

Author: pettinarip

src/components/ProductCard.tsx

@@ -1,123 +1,20 @@
 import React, { ReactNode } from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import { useQuery, gql } from "@apollo/client"
+import {
+  Box,
+  Center,
+  Flex,
+  Heading,
+  HStack,
+  Img,
+  Text,
+  TextProps,
+} from "@chakra-ui/react"
 
 import GitStars from "./GitStars"
 import ButtonLink from "./ButtonLink"
 
-const ImageWrapper = styled.div<{
-  background: string
-}>`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background: ${(props) => props.background};
-  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
-  min-height: 200px;
-`
-
-const Image = styled(GatsbyImage)`
-  width: 100%;
-  align-self: center;
-  max-width: 372px;
-  max-height: 257px;
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    max-width: 311px;
-  }
-`
-
-const Card = styled.div`
-  color: ${(props) => props.theme.colors.text};
-  box-shadow: 0px 14px 66px rgba(0, 0, 0, 0.07);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background: ${(props) => props.theme.colors.searchBackground};
-  border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.colors.lightBorder};
-  text-decoration: none;
-  &:hover {
-    transition: transform 0.1s;
-    transform: scale(1.02);
-  }
-`
-
-const Content = styled.div`
-  padding: 1.5rem;
-  text-align: left;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-const Title = styled.h3<{
-  gitHidden: boolean
-}>`
-  margin-top: ${(props) => (props.gitHidden ? "2rem" : "3rem")};
-  margin-bottom: 0.75rem;
-`
-
-const Description = styled.p`
-  opacity: 0.8;
-  font-size: ${(props) => props.theme.fontSizes.s};
-  margin-bottom: 0.5rem;
-  line-height: 140%;
-`
-
-const SubjectContainer = styled.div`
-  margin-top: 1.25rem;
-  padding: 0 1.5rem;
-`
-
-const SubjectPill = styled.div<{
-  subject: string
-}>`
-  text-align: center;
-  padding: 0 0.5rem;
-  margin: 0 0.75rem 0.5rem 0;
-  color: ${(props) => props.theme.colors.black300};
-  float: left;
-  background: ${({ theme, subject }) => {
-    switch (subject) {
-      case "Solidity":
-        return theme.colors.tagYellow
-      case "Vyper":
-        return theme.colors.tagBlue
-      case "web3":
-        return theme.colors.tagTurquoise
-      case "JavaScript":
-        return theme.colors.tagRed
-      case "TypeScript":
-        return theme.colors.tagBlue
-      case "Go":
-        return theme.colors.tagTurquoise
-      case "Python":
-        return theme.colors.tagMint
-      case "Rust":
-        return theme.colors.tagOrange
-      case "C#":
-        return theme.colors.tagBlue
-      case "Java":
-        return theme.colors.tagPink
-      default:
-        return theme.colors.tagGray
-    }
-  }};
-  font-size: ${(props) => props.theme.fontSizes.xs};
-  border: 1px solid ${(props) => props.theme.colors.lightBorder};
-  border-radius: 4px;
-`
-
-const StyledButtonLink = styled(ButtonLink)`
-  margin: 1rem;
-`
-
-const Children = styled.div`
-  margin-top: 1rem;
-`
-
 const REPO_DATA = gql`
   query RepoData(
     $repoOwner: String!
@@ -139,6 +36,52 @@ const REPO_DATA = gql`
   }
 `
 
+const SubjectPill: React.FC<{ subject: string; children: ReactNode }> = ({
+  subject,
+  children,
+}) => {
+  const bgColor = () => {
+    switch (subject) {
+      case "Solidity":
+        return "tagYellow"
+      case "Vyper":
+        return "tagBlue"
+      case "web3":
+        return "tagTurquoise"
+      case "JavaScript":
+        return "tagRed"
+      case "TypeScript":
+        return "tagBlue"
+      case "Go":
+        return "tagTurquoise"
+      case "Python":
+        return "tagMint"
+      case "Rust":
+        return "tagOrange"
+      case "C#":
+        return "tagBlue"
+      case "Java":
+        return "tagPink"
+      default:
+        return "tagGray"
+    }
+  }
+  return (
+    <Box
+      background={bgColor()}
+      border="1px"
+      borderColor="lightBorder"
+      borderRadius="base"
+      color="black300"
+      fontSize="xs"
+      textAlign="center"
+      px={2}
+    >
+      {children}
+    </Box>
+  )
+}
+
 export interface IProps {
   children?: React.ReactNode
   url: string
@@ -156,7 +99,7 @@ export interface IProps {
 
 const ProductCard: React.FC<IProps> = ({
   url,
-  background,
+  background: bgProp,
   image,
   name,
   description,
@@ -186,27 +129,67 @@ const ProductCard: React.FC<IProps> = ({
 
   const isImgSrc = typeof image === "string"
 
+  const DESCRIPTION_STYLES: TextProps = {
+    opacity: 0.8,
+    fontSize: "sm",
+    mb: 2,
+    lineHeight: "140%",
+  }
+
   return (
-    <Card>
-      <ImageWrapper background={background}>
+    <Flex
+      flexDirection="column"
+      justifyContent="space-between"
+      color="text"
+      background="searchBackground"
+      boxShadow="0px 14px 66px rgba(0, 0, 0, 0.07)"
+      borderRadius="base"
+      border="1px"
+      borderColor="lightBorder"
+      textDecoration="none"
+      _hover={{
+        transition: "transform 0.1s",
+        transform: "scale(1.02)",
+      }}
+    >
+      <Center
+        background={bgProp}
+        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
+        minH="200px"
+      >
         {isImgSrc ? (
           <img src={image} alt={alt} />
         ) : (
-          <Image image={image} alt={alt} objectFit="contain" />
+          <Img
+            as={GatsbyImage}
+            image={image}
+            alt={alt}
+            objectFit="contain"
+            width="100%"
+            alignSelf="center"
+            maxW={{ base: "311px", sm: "372px" }}
+            maxH="257px"
+          />
         )}
-      </ImageWrapper>
-      <Content className="hover">
-        <div>
-          {hasRepoData && (
-            <GitStars gitHubRepo={data.repository} hideStars={hideStars} />
-          )}
-          <Title gitHidden={!hasRepoData}>{name}</Title>
-          <Description>{description}</Description>
-          {note.length > 0 && <Description>Note: {note}</Description>}
-        </div>
-        {children && <Children>{children}</Children>}
-      </Content>
-      <SubjectContainer>
+      </Center>
+      <Flex flexDirection="column" p={6} textAlign="left" height="100%">
+        {hasRepoData && (
+          <GitStars gitHubRepo={data.repository} hideStars={hideStars} />
+        )}
+        <Heading
+          as="h3"
+          fontSize="2xl"
+          fontWeight={600}
+          mt={!hasRepoData ? 8 : 12}
+          mb={3}
+        >
+          {name}
+        </Heading>
+        {description && <Text {...DESCRIPTION_STYLES}>{description}</Text>}
+        {note.length > 0 && <Text {...DESCRIPTION_STYLES}>Note: {note}</Text>}
+        {children && <Box mt={4}>{children}</Box>}
+      </Flex>
+      <HStack mt={5} mb={2} px={6} spacing={3}>
         {subjects &&
           subjects.map((subject, idx) => (
             <SubjectPill key={idx} subject={subject}>
@@ -221,11 +204,11 @@ const ProductCard: React.FC<IProps> = ({
               </SubjectPill>
             )
           )}
-      </SubjectContainer>
-      <StyledButtonLink h={20} to={url}>
+      </HStack>
+      <ButtonLink to={url} m={4} height={20}>
         Open {name}
-      </StyledButtonLink>
-    </Card>
+      </ButtonLink>
+    </Flex>
   )
 }