new

README.md

@@ -1,2 +1,3 @@
 # SpiritTail
- coktail web app
+
+cocktail web app

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,56 @@
+.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%;
+}
+
+@media screen and (max-width: 769px) {
+  .wrapper {
+    display: none;
+  }
+}

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.css

@@ -0,0 +1,68 @@
+.mix {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+}
+.dt {
+  position: relative;
+  top: 100px;
+}
+.containerBox {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  background: transparent;
+  overflow: hidden;
+}
+.box {
+  position: absolute;
+  width: 1200px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  transform-style: preserve-3d;
+  overflow: hidden;
+}
+.box.box1 {
+  background: wheat;
+  transform-origin: right;
+  transform: perspective(500px) translateX(-50%) rotateY(-15deg);
+}
+.box.box2 {
+  background: wheat;
+  transform-origin: left;
+  transform: perspective(500px) translateX(50%) rotateY(15deg);
+}
+.box h1 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  left: 0;
+  white-space: nowrap;
+  left: 0;
+  font-size: 8em;
+  animation: move 10s linear infinite;
+}
+.box.box1 h1 {
+  color: #fff;
+}
+.box.box2 h1 {
+  color: rgba(255, 255, 255, 0.2);
+  left: -100%;
+}
+
+@keyframes move {
+  0% {
+    transform: translate(2400px);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

src/Components/Detail.js

@@ -0,0 +1,53 @@
+import React, { Fragment } from "react";
+import useFetchId from "./services/useFetchId.js";
+import Pic from "./Pic.js";
+import LogoNav from "./LogoNav";
+import "./Detail.css";
+// 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 || details[`strMeasure${i}`] == "") {
+      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 (
+    <Fragment>
+      <LogoNav />
+
+      <div className="dt">
+        <div className="containerBox" id="cocktail header logo">
+          <div className="box box1">
+            <h1>{cTail}</h1>
+          </div>
+          <div className="box box2">
+            <h1>{cTail} </h1>
+          </div>
+        </div>
+        <h1 id="Cocktail glass"> {details.strGlass}</h1>
+
+        <div className="mix" id="cocktail ingredients">
+          {mix}
+        </div>
+        <div>
+          <h1 id="Cocktail Instructions">{details.strInstructions}</h1>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default Detail;