Merge pull request #8774 from TylerAPfledderer/refactor/tutorial-tags-chakra

Refactor: Migrate `TutorialTags` to Chakra UI

Author: pettinarip

src/components/Pill.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { Flex } from "@chakra-ui/react"
+import { Flex, FlexProps } from "@chakra-ui/react"
 
-export interface IProps {
+export interface IProps extends FlexProps {
   children?: React.ReactNode
   className?: string
   isSecondary?: boolean
@@ -12,7 +12,8 @@ const Pill: React.FC<IProps> = ({
   children,
   className,
   isSecondary,
-  color,
+  background,
+  ...rest
 }) => {
   return isSecondary ? (
     <Flex
@@ -28,12 +29,13 @@ const Pill: React.FC<IProps> = ({
       borderRadius="base"
       fontSize="xs"
       className={className}
+      {...rest}
     >
       {children}
     </Flex>
   ) : (
     <Flex
-      backgroundColor={color ? color : "primary100"}
+      background={background ?? "primary100"}
       display="inline-block"
       color="black300"
       textTransform="uppercase"
@@ -44,6 +46,7 @@ const Pill: React.FC<IProps> = ({
       fontSize="xs"
       borderRadius="base"
       className={className}
+      {...rest}
     >
       {children}
     </Flex>

src/components/TutorialTags.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import styled from "@emotion/styled"
 
 import Pill from "./Pill"
 
@@ -27,12 +26,6 @@ const colors = [
   "tagPink",
 ] as const
 
-const TagPill = styled(Pill)`
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-  background-color: ${(props) => props.theme.colors[props.color!]};
-`
-
 export interface IProps {
   tags: Array<string>
 }
@@ -44,9 +37,9 @@ const TutorialTags: React.FC<IProps> = ({ tags }) => {
         const tagColorIdx = hashCode(tag) % colors.length
         const tagColor = colors[tagColorIdx]
         return (
-          <TagPill key={idx} color={tagColor}>
+          <Pill key={idx} me={2} mb={2} background={tagColor}>
             {tag}
-          </TagPill>
+          </Pill>
         )
       })}
     </>