feat(cart): Add cart button component (#95)

packages/ui/components/merch/CartButton.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link"
+import { Icon } from "@chakra-ui/react";
+import routes from "../../../../apps/web/features/merch/constants/routes";
+
+const CartButton = () => {
+  return(
+      <Icon viewBox="0 0 24 24" boxSize={7}>
+          <path fill="none" stroke-width="1.5" stroke="white"
+            d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+      </Icon>
+  )
+}
+
+/*
+const CartButton = () => {
+    return(
+    <Link href={routes.CART}
+      style={{
+        textDecoration: "none",
+        background: "black",
+        width: "2.8em",
+        height: "2.8em",
+        padding: 0,
+        borderRadius: "50%",
+        display: "flex", 
+        justifyContent: "center",
+        alignItems: "center"
+      }}>
+          <Icon p="0.3em"
+          bg="brand.red.medium" 
+          borderRadius="50%"  _hover={{
+            background: "brand.red.dark"
+          }}
+          viewBox="0 0 24 24" boxSize={10}>
+            <path fill="none" stroke-width="1.5" stroke="white"
+              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+          </Icon>
+      </Link>
+    )
+}
+*/
+
+export default CartButton;

packages/ui/components/merch/Page.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Flex, FlexProps, Box } from "@chakra-ui/react";
-import { CartHeader } from "./CartHeader";
 
 type PageProps = FlexProps & {
   children: ReactNode;
@@ -11,14 +10,13 @@ type PageProps = FlexProps & {
 
 export const Page = ({
   children,
-  hideHeader = false,
   contentWidth = "1400px",
   contentPadding = [4, 6, 8],
   ...props
 }: PageProps) => {
   return (
     <Flex flexDirection="column" {...props}>
-      {!hideHeader && <CartHeader />}
+      <Box w="100%" h="3em"></Box>
       <Box
         w="100%"
         flexDir="column"
@@ -32,4 +30,4 @@ export const Page = ({
       </Box>
     </Flex>
   );
-};
+};

packages/ui/components/merch/index.tsx

@@ -1,8 +1,7 @@
 export * from "./Card"
-export * from "./CartHeader"
 export * from "./EmptyProductView"
 export * from "./MerchCarousel"
 export * from "./Page"
 export * from "./SizeChartDialog"
 export * from "./SizeOption"
-export * from "./skeleton"
+export * from "./skeleton"

packages/ui/components/navbar/MenuItems.tsx

@@ -1,13 +1,27 @@
-import React from "react";
 import { Box, Link, Stack, Text } from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 import { MenuLink, MenuLinkProps } from "./MenuLink";
+import CartButton from "../merch/CartButton";
+import routes from "../../../../apps/web/features/merch/constants/routes";
 
 interface MenuItemProps {
   isOpen?: boolean;
   links: Array<MenuLinkProps>;
 }
 
 export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
+
+  const router = useRouter()
+  const [route, setRoute] = useState('')
+
+  useEffect(() => {
+    setRoute(router.pathname),
+    []
+  })
+
+  const regexp = /\/merch*/;
+
   return (
     <Box
       display={{ base: isOpen ? "flex" : "none", xl: "flex" }}
@@ -37,8 +51,9 @@ export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
       </Stack>
 
       {/* CTA Button -> Contact */}
+      {/* If on merch site, change to Cart */}
       <Link
-        href={"/contact"}
+        href={route.match(regexp) ? routes.CART : "/contact"}
         _hover={{
           bgColor: "brand.red.dark"
         }}
@@ -51,7 +66,8 @@ export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
         w="max-content"
         display={{ base: "block", xl: "block" }}
       >
-        <Text display="block">Contact</Text>
+          {route.match(regexp) ? <CartButton /> :
+          <Text display="block">Contact</Text>}
       </Link>
     </Box>
   );