ProductList.tsx refactor to ChakraUI

Author: beamandala

src/components/ProductList.tsx

@@ -1,76 +1,9 @@
 import React from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import ButtonLink from "./ButtonLink"
 import Translation from "./Translation"
-
-const Product = styled.div`
-  width: 100%;
-`
-
-const Item = styled.div`
-  display: flex;
-  color: ${(props) => props.theme.colors.text} !important;
-  margin-bottom: 1px;
-  margin-top: 2rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    align-items: flex-start;
-  }
-`
-
-const ItemTitle = styled.div``
-
-const CategoryTitle = styled.h3`
-  border-bottom: 2px solid ${(props) => props.theme.colors.border};
-  padding-bottom: 1rem;
-  margin-bottom: 0rem;
-`
-
-const TextContent = styled.div`
-  padding-bottom: 1rem;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-left: 1.5rem;
-  justify-content: space-between;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: 1rem;
-  }
-`
-
-const ItemDesc = styled.div`
-  font-size: ${(props) => props.theme.fontSizes.s};
-  margin-bottom: 0;
-  opacity: 0.6;
-`
-
-const ImageContainer = styled.div`
-  width: 80px;
-`
-
-const LeftContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const Image = styled(GatsbyImage)`
-  box-shadow: ${(props) => props.theme.colors.tableBoxShadow};
-  border-radius: 2px;
-`
-
-const StyledButton = styled(ButtonLink)`
-  margin-left: 2rem;
-  padding: 0.25rem 1.5rem;
-  border-radius: 2px;
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    margin-top: 1rem;
-    margin-left: 0rem;
-  }
-`
+import { Box, Flex, Heading } from "@chakra-ui/react"
 
 export interface Content {
   title: string
@@ -87,27 +20,68 @@ export interface IProps {
 }
 
 const ProductList: React.FC<IProps> = ({ content, category }) => (
-  <Product>
-    <CategoryTitle>{category}</CategoryTitle>
+  <Box width="full">
+    <Heading
+      as="h3"
+      borderBottom="2px solid"
+      borderColor="border"
+      paddingBottom={4}
+      marginBottom={0}
+    >
+      {category}
+    </Heading>
     {content.map(({ title, description, link, image, alt, id }, idx) => (
-      <Item key={id || idx}>
-        <ImageContainer>
-          {image && <Image image={image} alt={alt} />}
-        </ImageContainer>
-        <TextContent>
-          <LeftContainer>
-            <ItemTitle>{title}</ItemTitle>
-            <ItemDesc>{description}</ItemDesc>
-          </LeftContainer>
+      <Flex
+        key={id || idx}
+        color="text"
+        marginBottom="px"
+        marginTop={8}
+        alignItems={{ sm: "flex-start" }}
+      >
+        <Box width="5rem">
+          {image && (
+            <Box
+              as={GatsbyImage}
+              image={image}
+              alt={alt}
+              boxShadow="tableBoxShadow"
+              borderRadius="sm"
+            />
+          )}
+        </Box>
+        <Flex
+          paddingBottom={4}
+          width="full"
+          alignItems={{ base: "flex-start", sm: "center" }}
+          marginLeft={{ base: 6, sm: 4 }}
+          justifyContent="space-between"
+          borderBottom="1px solid"
+          borderColor="border"
+          flexDir={{ base: "column", sm: "row" }}
+        >
+          <Box flexDir="column">
+            <Box>{title}</Box>
+            <Box fontSize="sm" marginBottom={0} opacity="0.6">
+              {description}
+            </Box>
+          </Box>
           {link && (
-            <StyledButton variant="outline" to={link}>
+            <ButtonLink
+              variant="outline"
+              to={link}
+              marginLeft={{ base: 0, sm: 8 }}
+              paddingY={1}
+              paddingX={6}
+              borderRadius="sm"
+              marginTop={{ base: 4, sm: 0 }}
+            >
               <Translation id="page-dapps-ready-button" />
-            </StyledButton>
+            </ButtonLink>
           )}
-        </TextContent>
-      </Item>
+        </Flex>
+      </Flex>
     ))}
-  </Product>
+  </Box>
 )
 
 export default ProductList