mirror of
https://github.com/rjNemo/meal_planner
synced 2026-06-06 02:26:49 +00:00
basic styling
This commit is contained in:
parent
1635dab4c7
commit
533e5dabc1
13 changed files with 327 additions and 37 deletions
218
package-lock.json
generated
218
package-lock.json
generated
|
|
@ -1043,6 +1043,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
|
||||
"integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
|
||||
|
|
@ -1268,6 +1273,75 @@
|
|||
"@types/yargs": "^13.0.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz",
|
||||
"integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.9.0",
|
||||
"@material-ui/system": "^4.7.1",
|
||||
"@material-ui/types": "^5.0.0",
|
||||
"@material-ui/utils": "^4.7.1",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.2",
|
||||
"convert-css-length": "^2.0.1",
|
||||
"hoist-non-react-statics": "^3.2.1",
|
||||
"normalize-scroll-left": "^0.2.0",
|
||||
"popper.js": "^1.14.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0",
|
||||
"react-transition-group": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz",
|
||||
"integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.7.4",
|
||||
"@material-ui/types": "^5.0.0",
|
||||
"@material-ui/utils": "^4.7.1",
|
||||
"clsx": "^1.0.2",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.2.1",
|
||||
"jss": "^10.0.3",
|
||||
"jss-plugin-camel-case": "^10.0.3",
|
||||
"jss-plugin-default-unit": "^10.0.3",
|
||||
"jss-plugin-global": "^10.0.3",
|
||||
"jss-plugin-nested": "^10.0.3",
|
||||
"jss-plugin-props-sort": "^10.0.3",
|
||||
"jss-plugin-rule-value-function": "^10.0.3",
|
||||
"jss-plugin-vendor-prefixer": "^10.0.3",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.7.1.tgz",
|
||||
"integrity": "sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.7.1",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
|
||||
"integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz",
|
||||
"integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0"
|
||||
}
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
|
|
@ -1576,6 +1650,14 @@
|
|||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
|
||||
"integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
|
|
@ -3712,6 +3794,11 @@
|
|||
"shallow-clone": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
|
||||
"integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
|
||||
},
|
||||
"co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
|
|
@ -3923,6 +4010,11 @@
|
|||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
|
||||
},
|
||||
"convert-css-length": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
|
||||
"integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
|
||||
|
|
@ -4209,6 +4301,15 @@
|
|||
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
|
||||
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
|
||||
"integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.6.2",
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
||||
|
|
@ -4635,6 +4736,15 @@
|
|||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
|
||||
"integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.6.3",
|
||||
"csstype": "^2.6.7"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
|
|
@ -6608,6 +6718,11 @@
|
|||
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
|
||||
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
|
||||
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
@ -6907,6 +7022,11 @@
|
|||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"is-in-browser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||
},
|
||||
"is-number": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
|
||||
|
|
@ -8251,6 +8371,83 @@
|
|||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.3.tgz",
|
||||
"integrity": "sha512-AcDvFdOk16If9qvC9KN3oFXsrkHWM9+TaPMpVB9orm3z+nq1Xw3ofHyflRe/mkSucRZnaQtlhZs1hdP3DR9uRw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"csstype": "^2.6.5",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.3.tgz",
|
||||
"integrity": "sha512-rild/oFKFkmRP7AoiX9D6bdDAUfmJv8c7sEBvFoi+JP31dn2W8nw4txMKGnV1LJKlFkYprdZt1X99Uvztl1hug==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.3.tgz",
|
||||
"integrity": "sha512-n+XfVLPF9Qh7IOTdQ8M4oRpjpg6egjr/r0NNytubbCafMgCILJYIVrMTGgOTydH+uvak8onQY3f/F9hasPUx6g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.3.tgz",
|
||||
"integrity": "sha512-kNotkAciJIXpIGYnmueaIifBne9rdq31O8Xq1nF7KMfKlskNRANTcEX5rVnsGKl2yubTMYfjKBFCeDgcQn6+gA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.3.tgz",
|
||||
"integrity": "sha512-OMucRs9YLvWlZ3Ew+VhdgNVMwSS2zZy/2vy+s/etvopnPUzDHgCnJwdY2Wx/SlhLGERJeKKufyih2seH+ui0iw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.0.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.3.tgz",
|
||||
"integrity": "sha512-ufhvdCMnRcDa0tNHoZ12OcVNQQyE10yLMohxo/UIMarLV245rM6n9D19A12epjldRgyiS13SoSyLFCJEobprYg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.3.tgz",
|
||||
"integrity": "sha512-RWwIT2UBAIwf3f6DQtt5gyjxHMRJoeO9TQku+ueR8dBMakqSSe8vFwQNfjXEoe0W+Tez5HZCTkZKNMulv3Z+9A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.3.tgz",
|
||||
"integrity": "sha512-zVs6e5z4tFRK/fJ5kuTLzXlTFQbLeFTVwk7lTZiYNufmZwKT0kSmnOJDUukcSe7JLGSRztjWhnHB/6voP174gw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.7",
|
||||
"jss": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"jsx-ast-utils": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
|
||||
|
|
@ -9120,6 +9317,11 @@
|
|||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
||||
},
|
||||
"normalize-scroll-left": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
|
||||
"integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
|
||||
},
|
||||
"normalize-url": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
|
||||
|
|
@ -9717,6 +9919,11 @@
|
|||
"ts-pnp": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.25",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
|
||||
|
|
@ -11231,6 +11438,17 @@
|
|||
"workbox-webpack-plugin": "4.3.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
|
||||
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.9.0",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.4.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,23 @@
|
|||
<meta name="description" content="Chef's Meal Planner" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
|
||||
/>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
|
||||
<title>Chef's Meal Planner</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
const CopyrightText = () => {
|
||||
return <p>2020 - Meal's Planner - Made with love</p>;
|
||||
return <span>© 2020 - Meal's Planner - Made with ❤️</span>;
|
||||
};
|
||||
|
||||
export default CopyrightText;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@ import GitHubLink from "./GitHubLink";
|
|||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="Footer">
|
||||
<CopyrightText />
|
||||
<GitHubLink />
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
<CopyrightText />
|
||||
<GitHubLink />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@ import React from "react";
|
|||
|
||||
const GitHubLink = () => {
|
||||
return (
|
||||
<a href="https://github.com/rjNemo" target="blank">
|
||||
<a
|
||||
className="grey-text text-lighten-4 right"
|
||||
href="https://github.com/rjNemo"
|
||||
target="blank"
|
||||
rel="noopener"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ const IngredientList = props => {
|
|||
const { ingredients } = props;
|
||||
return (
|
||||
<div className="ingredientList">
|
||||
<h2>Ingredient List</h2>
|
||||
<h2>Ingredients</h2>
|
||||
<ul>
|
||||
{ingredients.map(ing => (
|
||||
<li>
|
||||
{ing[0]}: {ing[1]}
|
||||
<b>{ing[0]}:</b> {ing[1]}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Logo = () => {
|
||||
return <p>🍪</p>;
|
||||
return (
|
||||
<Link to="/" class="brand-logo">
|
||||
<span role="img" aria-label="cookie">
|
||||
🍪
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,24 @@ const MealPresentation = props => {
|
|||
mealArea
|
||||
} = props.meal;
|
||||
return (
|
||||
<div className="mealPresentation">
|
||||
<h1>{mealName}</h1>
|
||||
<img src={imgAddress} alt={mealName} />
|
||||
<a href={videoAddress} target="blank">
|
||||
See in video
|
||||
</a>
|
||||
{/* <video width="" height="" controls autoplay>
|
||||
<div className="row">
|
||||
<div className="col s12">
|
||||
<h1>{mealName}</h1>
|
||||
<div className="col s8">
|
||||
<img src={imgAddress} alt={mealName} height="320" />
|
||||
</div>
|
||||
<div className="col s4">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={videoAddress} target="blank">
|
||||
See in video
|
||||
</a>
|
||||
</li>
|
||||
{/* <video width="" height="" controls autoplay>
|
||||
<source src={videoAddress} type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video> */}
|
||||
{/* <iframe
|
||||
{/* <iframe
|
||||
title="video"
|
||||
width="560"
|
||||
height="315"
|
||||
|
|
@ -28,10 +35,16 @@ const MealPresentation = props => {
|
|||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe> */}
|
||||
<ul>
|
||||
<li>{mealCategory}</li>
|
||||
<li>{mealArea}</li>
|
||||
</ul>
|
||||
|
||||
<li>
|
||||
<b>Category:</b> {mealCategory}
|
||||
</li>
|
||||
<li>
|
||||
<b>Origin:</b> {mealArea}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,14 +5,26 @@ import RandomButton from "./RandomButton";
|
|||
|
||||
const Navbar = props => {
|
||||
return (
|
||||
<div className="Navbar">
|
||||
<Logo />
|
||||
<SearchBar
|
||||
searchString={props.searchString}
|
||||
handleChange={props.handleChange}
|
||||
/>
|
||||
<RandomButton />
|
||||
</div>
|
||||
<nav>
|
||||
<div className="nav-wrapper">
|
||||
{/* <div className="container"> */}
|
||||
<div className="row">
|
||||
<div className="col s2">
|
||||
<Logo />
|
||||
</div>
|
||||
<div className="col s6">
|
||||
<SearchBar
|
||||
searchString={props.searchString}
|
||||
handleChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col s4">
|
||||
<RandomButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const RandomButton = () => {
|
||||
return <input type="submit" value="Random Recipe" />;
|
||||
return (
|
||||
<Link to="/meal">
|
||||
<button class="waves-effect waves-light btn-large">Random Recipe</button>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default RandomButton;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@ export default class HomePage extends Component {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Get a daily suggestion from the Chef</h1>
|
||||
<RandomButton />
|
||||
<div className="section">
|
||||
<div className="container center-align">
|
||||
<h1>Get a daily suggestion from the Chef</h1>
|
||||
<RandomButton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,19 @@ const MealPage = props => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container">
|
||||
<MealPresentation meal={item} />
|
||||
<IngredientList ingredients={ingredientList} />
|
||||
{/* <p>
|
||||
<div className="row">
|
||||
<div className="col s6">
|
||||
<IngredientList ingredients={ingredientList} />
|
||||
</div>
|
||||
{/* <p>
|
||||
{meal["strIngredient9"]}: {meal["strMeasure9"]}
|
||||
</p> */}
|
||||
<Recipe recipe={strInstructions} />
|
||||
<div className="col s6">
|
||||
<Recipe recipe={strInstructions} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue