logo on list page

src/App.js

@@ -0,0 +1,25 @@
+import React from "react";
+import InputSpirit from "./Components/InputSpirit.js";
+import Detail from "./Components/Detail.js";
+import TheList from "./Components/TheList.js";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { Provider } from "react-redux";
+import store from "./Components/redux/drinkStore";
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <Router>
+        <div className="App">
+          <Switch>
+            <Route path="/" exact component={InputSpirit} />
+            <Route path="/list/:id" exact component={TheList} />
+            <Route path="/detail/:id" exact component={Detail} />
+          </Switch>
+        </div>
+      </Router>
+    </Provider>
+  );
+};
+
+export default App;

src/Components/CubeView.css

@@ -0,0 +1,50 @@
+.wrapper {
+  position: fixed;
+  top: 300px;
+  right: 400px;
+  perspective: 1500px;
+  display: block;
+  width: 1px;
+  margin: 100px;
+}
+.area {
+  position: static;
+  transform-style: preserve-3d;
+  animation-name: rotate;
+  animation-duration: 35s;
+  animation-timing-function: linear;
+  animation-iteration-count: 2;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 0, 0);
+  }
+  100% {
+    transform: rotate3d(0, 1, 0, 360deg);
+  }
+}
+.front {
+  transform: translateX(-200px) translateY(-200px) translateZ(200px);
+}
+.back {
+  transform: translateX(-200px) translateY(-200px) translateZ(-200px);
+}
+.right {
+  transform: translateY(-200px) rotateY(90deg);
+}
+.left {
+  transform: translateY(-200px) translateX(-400px) rotateY(90deg);
+}
+.top {
+  transform: translateX(-200px) translateY(-400px) rotateX(90deg);
+}
+.bottom {
+  transform: translateX(-200px) rotateX(90deg);
+}
+
+.drinkpic {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}

src/Components/CubeView.js

@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import "./CubeView.css";
+
+const CubeView = ({ strDrinkThumb }) => {
+  const mystyle = {
+    position: "absolute",
+    width: "400px",
+    height: "400px",
+  };
+
+  return (
+    <div className="wrapper">
+      <div className="area">
+        <div className="front" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="front cube img" />
+        </div>
+        <div className="back" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="back cube img" />
+        </div>
+        <div className="right" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="right cube img" />
+        </div>
+        <div className="left" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="left cube img" />
+        </div>
+        <div className="top" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="top cube img" />
+        </div>
+        <div className="bottom" style={mystyle}>
+          <img src={strDrinkThumb} className="drinkpic" alt="bottom cube img" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CubeView;

src/Components/CubeView.module.css

@@ -0,0 +1,50 @@
+.wrapper {
+  position: fixed;
+  top: 300px;
+  right: 400px;
+  perspective: 1500px;
+  display: block;
+  width: 1px;
+  margin: 100px;
+}
+.area {
+  position: static;
+  transform-style: preserve-3d;
+  animation-name: rotate;
+  animation-duration: 35s;
+  animation-timing-function: linear;
+  animation-iteration-count: 2;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 0, 0);
+  }
+  100% {
+    transform: rotate3d(0, 1, 0, 360deg);
+  }
+}
+.front {
+  transform: translateX(-200px) translateY(-200px) translateZ(200px);
+}
+.back {
+  transform: translateX(-200px) translateY(-200px) translateZ(-200px);
+}
+.right {
+  transform: translateY(-200px) rotateY(90deg);
+}
+.left {
+  transform: translateY(-200px) translateX(-400px) rotateY(90deg);
+}
+.top {
+  transform: translateX(-200px) translateY(-400px) rotateX(90deg);
+}
+.bottom {
+  transform: translateX(-200px) rotateX(90deg);
+}
+
+.drinkpic {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}

src/Components/Detail.js

@@ -0,0 +1,41 @@
+import React from "react";
+import useFetchId from "./services/useFetchId.js";
+import Pic from "./Pic.js";
+import LogoNav from "./LogoNav";
+// eslint-disable-next-line react/prop-types
+const Detail = ({ match }) => {
+  const { details } = useFetchId(match.params.id);
+  const mix = [];
+
+  for (let i = 1; i < 16; i++) {
+    if (details[`strMeasure${i}`] == null) {
+      break;
+    }
+    mix.push(
+      <Pic
+        key={details[`strIngredient${i}`]}
+        ingredient={details[`strIngredient${i}`]}
+        measure={details[`strMeasure${i}`]}
+      />
+    );
+  }
+
+  let cTail = details.strDrink;
+  document.title = `${cTail} Detail Page`;
+
+  return (
+    <div>
+      <LogoNav />
+      <div>
+        <h1> {details.strDrink} </h1>
+        <h1> {details.strGlass}</h1>
+      </div>
+      <div>{mix}</div>
+      <div>
+        <h1>{details.strInstructions}</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Detail;