Merch Page

src/components/MerchSection/Merch.tsx → src/components/MerchSection/MerchCollection.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import MerchItem from "./MerchItem";
 import * as S from "./Merch.styles";
-import "./Merch.styles.ts";
-import { MerchComponents } from "./MerchData";
+import { type MerchProperties } from "./MerchData";
 
-type MerchProps = {
-  merchItems: MerchComponents[];
+type MerchCollectionProps = {
+  merchItems: MerchProperties[];
   desktopView: boolean;
 };
-const Merch = (props: MerchProps) => {
+
+const MerchCollection = (props: MerchCollectionProps) => {
   return (
     <S.MerchContainer mobileView={!props.desktopView}>
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      {props.merchItems.map((member: any) => {
+      {props.merchItems.map((metchItem: MerchProperties) => {
         return (
           <MerchItem
-            key={member.id}
-            member={member}
-            profilePic={member.image}
+            key={metchItem.id}
+            member={metchItem}
+            profilePic={metchItem.image}
             mobileView={!props.desktopView}
           />
         );
@@ -26,4 +26,4 @@ const Merch = (props: MerchProps) => {
   );
 };
 
-export default React.memo(Merch);
+export default React.memo(MerchCollection);

src/components/MerchSection/MerchData.ts

@@ -1,51 +1,33 @@
-import BlackHoodie from "../../images/merch/BlackHoodie.jpeg";
-import BlackBeanie from "../../images/merch/BlackBeanie.jpeg";
-import ToteBag from "../../images/merch/ToteBag.jpeg";
-import BlackShortSleeve from "../../images/merch/BlackShortSleeve.jpeg";
-import MousePad1 from "../../images/merch/MousePad1.jpeg";
+import BasicCrewneck from "../../images/merch/BasicCrewneck.jpg";
+import BasicCrewneckWithSleevePrint from "../../images/merch/BasicCrewneckWithSleevePrint.jpg";
 
-export type MerchComponents = {
+export type MerchProperties = {
   id: number;
   item: string;
   price: string;
   image: string;
   description: string;
+  sizes: string[];
+  colors: string[];
 };
 
-export const merchList: MerchComponents[] = [
+export const merchList: MerchProperties[] = [
   {
     id: 0,
-    item: "Hoodie",
-    price: "$49.99",
-    image: BlackHoodie,
-    description: "Available in White and Black",
+    item: "Original Basic Crewneck",
+    price: "$29.95 CAD",
+    image: BasicCrewneck,
+    description: "placeholder descripton",
+    sizes: ["S", "M", "L", "XL"],
+    colors: ["Black"],
   },
   {
     id: 1,
-    item: "Short Sleeve T-Shirt",
-    price: "$25.99",
-    image: BlackShortSleeve,
-    description: "Available in White and Black",
-  },
-  {
-    id: 2,
-    item: "Gaming Mouse Pad (36in x 18in)",
-    price: "$35.99",
-    image: MousePad1,
-    description: "Varying Designs",
-  },
-  {
-    id: 3,
-    item: "Eco Tote Bag",
-    price: "$39.99",
-    image: ToteBag,
-    description: "",
-  },
-  {
-    id: 4,
-    item: "Beanie",
-    price: "$29.99",
-    image: BlackBeanie,
-    description: "Available in White and Black",
+    item: "Crewneck with Sleeve Print",
+    price: "$49.99 CAD",
+    image: BasicCrewneckWithSleevePrint,
+    description: "placeholder descripton",
+    sizes: ["S", "M", "L", "XL"],
+    colors: ["Black"],
   },
 ];

src/components/MerchSection/MerchDescription.tsx

@@ -8,8 +8,8 @@ interface MerchDescriptionProps {
 const MerchDescription = (props: MerchDescriptionProps) => {
   return (
     <MerchDescriptionDiv>
-      <h3>{props.item}</h3>
-      <h4>{props.price}</h4>
+      <h2>{props.item}</h2>
+      <h3>{props.price}</h3>
     </MerchDescriptionDiv>
   );
 };

src/components/MerchSection/MerchItem.styles.ts

@@ -7,7 +7,9 @@ interface MerchItemStyleProps {
 export const MerchItemDiv = styled.div<MerchItemStyleProps>`
   width: clamp(150px, 20%, 300px);
   margin: 0 1% 2.5rem;
-  display: block;
+  display: flex;
+  row-gap: 0.75rem;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 
@@ -22,12 +24,11 @@ export const MerchItemIconDiv = styled.div`
 
   & > img {
     width: 100%;
-    height: 100%;
+    height: auto;
     transition: 0.4s ease-in-out;
     background-size: cover;
     background-color: white;
     position: relative;
     margin-top: 15px;
-    aspect-ratio: 1.5 / 2;
   }
 `;

src/components/MerchSection/MerchItem.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import * as S from "./MerchItem.styles";
-import { MerchComponents } from "./MerchData";
+import { type MerchProperties } from "./MerchData";
 import MerchDescription from "./MerchDescription";
+import HoverButton from "components/HoverButton/HoverButton";
+import { ButtonMode } from "components/HoverButton/HoverButton.styles";
 
-type MerchItemProps = {
-  key: number;
-  member: MerchComponents;
+export type MerchItemProps = {
+  member: MerchProperties;
   mobileView: boolean;
   profilePic: string;
 };
@@ -23,12 +24,18 @@ const MerchItem = (props: MerchItemProps) => {
       <S.MerchItemIconDiv>
         <img
           src={props.profilePic}
-          key={props.key}
+          key={props.member.id}
           onDragStart={preventDragHandler}
         />
       </S.MerchItemIconDiv>
 
       <MerchDescription item={props.member.item} price={props.member.price} />
+      <HoverButton
+        mode={ButtonMode.GRADIENT}
+        text={"Buy Now"}
+        link="https://docs.google.com/forms/d/e/1FAIpQLSfpXS4hisen7IBvMGZnrfYWH600W_vpJwW0-b7blsA-D5Dq2w/viewform"
+        linkIsInternal={false}
+      />
     </S.MerchItemDiv>
   );
 };

src/components/MerchSection/MerchSection.styles.ts

@@ -4,8 +4,9 @@ export const MerchSection = styled.div`
   padding: 5vw;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 5%;
+  padding-bottom: 10%;
   text-align: center;
+  height: 100%;
 
   & > h4 {
     font-size: var(--babyHeading-size);
@@ -27,4 +28,4 @@ export const MerchSection = styled.div`
     margin-top: 2%;
     margin-bottom: 2%;
   }
-`;
+`;

src/components/MerchSection/MerchSection.tsx

@@ -1,20 +1,16 @@
 import React from "react";
 import * as S from "./MerchSection.styles";
-import MerchTeamPhoto from "../../images/merch/MerchTeamPhoto.jpeg";
+import MerchCollection from "./MerchCollection";
+import { merchList } from "./MerchData";
+import useViewport from "components/UseViewport";
 
 const MerchSection = () => {
-  // const { width } = useViewport();
-  // const defaultView = width > 600 ? true : false;
-
-  // const getMerch = () => {
-  //   return merchList;
-  // };
+  const { width } = useViewport();
+  const defaultView = width > 600 ? true : false;
 
   return (
     <S.MerchSection data-aos="fade-up" >
-      <img src={MerchTeamPhoto} alt="Tech Start Execs Merch Photo" />
-      <h1 style={{ fontFamily: "consolas" }}>STAY TUNED</h1>
-      {/* <MerchCollection merchItems={getMerch()} desktopView={defaultView} /> */}
+      <MerchCollection merchItems={merchList} desktopView={defaultView} />
     </S.MerchSection>
   );
 };

src/utility/Helpers.tsx

@@ -6,7 +6,7 @@
  */
 export const NewlineText = (text: string) => {
   const oldText = text;
-  const newText = oldText.split("\n").map((str) => <p>{str}</p>);
+  const newText = oldText.split("\n").map((str, index) => <p key={index}>{str}</p>);
 
   return newText;
 };