Merge pull request #8501 from vdusart/feat/convert-Pill-component

convert the Pill component to Chakra

Author: pettinarip

src/components/Pill.tsx

@@ -1,32 +1,6 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { Flex } from "@chakra-ui/react"
 
-const Primary = styled.div<{ color?: string }>`
-  display: flex;
-  background: ${(props) =>
-    props.color
-      ? props.theme.colors[props.color]
-      : props.theme.colors.primary100};
-  color: ${(props) => props.theme.colors.black300};
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
-  font-size: 0.75rem;
-  border-radius: 0.25rem;
-`
-const Secondary = styled.div`
-  display: flex;
-  border: 1px solid ${(props) => props.theme.colors.primary100};
-  color: ${(props) => props.theme.colors.text};
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  border-radius: 0.25rem;
-`
 export interface IProps {
   children?: React.ReactNode
   className?: string
@@ -41,11 +15,38 @@ const Pill: React.FC<IProps> = ({
   color,
 }) => {
   return isSecondary ? (
-    <Secondary className={className}>{children}</Secondary>
+    <Flex
+      border="1px"
+      borderStyle="solid"
+      borderColor="primary100"
+      color="text"
+      textTransform="uppercase"
+      textAlign="center"
+      display="inline-block"
+      py={1}
+      px={2}
+      borderRadius="base"
+      fontSize="xs"
+      className={className}
+    >
+      {children}
+    </Flex>
   ) : (
-    <Primary color={color} className={className}>
+    <Flex
+      backgroundColor={color ? color : "primary"}
+      display="inline-block"
+      color="black300"
+      textTransform="uppercase"
+      textAlign="center"
+      py={1}
+      px={2}
+      mr={2}
+      fontSize="xs"
+      borderRadius="base"
+      className={className}
+    >
       {children}
-    </Primary>
+    </Flex>
   )
 }