Merge branch 'staging' into cart-page

.gitignore

@@ -0,0 +1 @@
+.DS_Store

client/src/App.tsx

@@ -1,3 +1,4 @@
 export default function App() {
   return <div></div>;
 }
+

client/src/assets/images/index.js

@@ -0,0 +1,7 @@
+import Arrow from './assets/images/arrow.png'
+import Strawberry from './assets/images/toppings/strawberry.png'
+
+export {
+    Arrow,
+    Strawberry
+};

client/src/components/ArrowButton.css

@@ -0,0 +1,5 @@
+.arrow-button {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}

client/src/components/ArrowButton.tsx

@@ -0,0 +1,18 @@
+import Arrow from "../assets/images/arrow.png"
+
+import "./ArrowButton.css";
+
+interface ArrowProps {
+  rotation: number // 0 points left, 90 points up, 180 points right, 270 points down
+  handleClick: (direction: string) => void
+}
+
+function ArrowButton(props: ArrowProps) {
+
+  return (
+    <img className='arrow-button' src={Arrow} style={{ transform: `rotate(${props.rotation}deg)` }}
+      onClick={() => props.handleClick(`${props.rotation < 180 ? 'left' : 'right'}`)} />
+  );
+}
+
+export default ArrowButton;

client/src/components/FlavorThumbnail.tsx

@@ -0,0 +1,25 @@
+import styles from "./flavor-thumbnail.module.css";
+
+export type Flavor = {
+  name: string,
+  price: number,
+  image: string,
+};
+
+
+export default function FlavorThumbnail( {flavor} : {flavor: Flavor}) {
+  return (
+    <>    
+    <div className={styles.container}>
+      <img
+        className={styles.image}
+        src={flavor.image}
+        alt={`Photo of ${flavor.name}`}
+      />
+      <p className={styles.text}><strong>{flavor.name}</strong></p>
+      <p className={styles.text}>${flavor.price}</p>
+    </div>
+    </>
+
+  );
+}

client/src/components/Suggestions.css

@@ -0,0 +1,17 @@
+.suggestion-list {
+    text-align: center;
+    padding: 0;
+    margin-block: 5;
+}
+
+.suggestion-item {
+    width: 20%;
+    display: inline-block;
+    padding: 10px;
+    vertical-align: top;
+}
+
+.suggestion-image {
+    max-width: 100%;
+    height: auto;
+}

client/src/components/Suggestions.tsx

@@ -0,0 +1,32 @@
+import "./Suggestions.css";
+
+type SuggestionItemProps = {
+  id: number;
+  image: string;
+  urlLink: string;
+};
+
+type SuggestionListProps = {
+  itemList: SuggestionItemProps[];
+};
+
+function SuggestionItem(item: SuggestionItemProps) {
+  return (
+    <div className="suggestion-item">
+      <a href={item.urlLink} target="_blank" rel="noreferrer">
+        <img className="suggestion-image" src={item.image} alt="flavor" />
+      </a>
+    </div>
+  );
+}
+
+export default function Suggestions({ itemList }: SuggestionListProps) {
+  return (
+    <div className="suggestion-list">
+      <p>This flavor goes well with:</p>
+      {itemList.map((item) => (
+        <SuggestionItem key={item.id} {...item} />
+      ))}
+    </div>
+  );
+}

client/src/components/ToppingButton.css

@@ -0,0 +1,5 @@
+.topping-img {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}

client/src/components/ToppingButton.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+import "./ToppingButton.css";
+
+interface ToppingButtonProps {
+    url: string,
+    selected: boolean
+}
+
+ToppingButton.defaultProps = {
+    selected: false
+}
+
+function ToppingButton(props: ToppingButtonProps) {
+    const [selected, setSelected] = useState(false);
+    return (
+        <div key={props.url}>
+            <div onClick={() => setSelected(!selected)}>
+                <img className='topping-img' src={props.url} alt="" onClick={() => console.log(props.url)} />
+                <p style={{ marginTop: '0px' }}>{selected ? '✅' : '🥄'}</p>
+            </div>
+        </div>
+    );
+}
+
+export default ToppingButton;

client/src/components/ToppingsBar.css

@@ -0,0 +1,3 @@
+.toppingbar-title {
+    text-align: 'center';
+}

client/src/components/ToppingsBar.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import ToppingsCarousel from "./ToppingsCarousel";
+
+import "./ToppingsBar.css";
+
+function ToppingsBar() {
+
+  return (
+    <>
+      <div className='toppingbar-title'>
+        <strong>toppings</strong>
+        <ToppingsCarousel />
+      </div>
+    </>
+  );
+}
+
+export default ToppingsBar;

client/src/components/ToppingsCarousel.css

@@ -0,0 +1,5 @@
+.toppings-carousel {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+}

client/src/components/ToppingsCarousel.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import ArrowButton from "./ArrowButton";
+import ToppingButton from "./ToppingButton";
+import Strawberry from "../assets/images/toppings/strawberry.png";
+import Chocolate from "../assets/images/toppings/chocolate.png"
+import Nuts from "../assets/images/toppings/nuts.png"
+import Sprinkles from "../assets/images/toppings/sprinkles.png"
+import Caramel from "../assets/images/toppings/caramel.png"
+import Marshmallow from "../assets/images/toppings/marshmallow.png"
+
+import "./ToppingsCarousel.css";
+
+const left = 0
+const right = 180
+
+function ToppingsCarousel() {
+    const [toppingImgUrls, setToppingImgUrls] = useState([Caramel, Marshmallow, Strawberry, Chocolate, Nuts, Sprinkles]);
+    function rotateArr(direction: string): void {
+        // don't mutate original array. make a copy then mutate the copy
+        let newArr: string[] = toppingImgUrls.slice();
+        if (newArr.length > 1) {
+            if (direction == 'left') {
+                // .shift() removes and returns the first element of the array.
+                // .push() pushes the value onto the end of the array.
+                let x = newArr.shift();
+                if (x) newArr.push(x);
+            } else {
+                // .pop() removes and returns the last element of the array.
+                // .unshift() 'pushes' the value onto the beginning of the array.
+                let x = newArr.pop();
+                if (x) newArr.unshift(x);
+            }
+        }
+        setToppingImgUrls(newArr);
+    }
+
+    return (
+        <div className='toppings-carousel'>
+            <ArrowButton rotation={left} handleClick={rotateArr} />
+            {toppingImgUrls.map((url, index) => (
+                <div key={url} hidden={index > 4 ? true : false}>
+                    <ToppingButton url={url} />
+                </div>
+            ))}
+            <ArrowButton rotation={right} handleClick={rotateArr} />
+        </div>
+    );
+}
+
+export default ToppingsCarousel;

client/src/components/flavor-thumbnail.module.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+.container {
+  width: 200px;
+  height: 300px;
+  border: 1px solid lightgrey;
+  text-align: center;
+}
+
+.image {
+  width: 86%;
+  height: 66.6667%;
+  object-fit: contain;
+}
+
+.text {
+  font-family: 'Roboto', sans-serif;
+}