mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-13 08:13:49 +10:00
- building the base modal trigger architecture
This commit is contained in:
Amruth Pillai
221
package-lock.json
generated
221
package-lock.json
generated
@ -1059,6 +1059,11 @@
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||
},
|
||||
"@firebase/analytics": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.3.8.tgz",
|
||||
@ -2027,6 +2032,74 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz",
|
||||
"integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.10.0",
|
||||
"@material-ui/system": "^4.9.14",
|
||||
"@material-ui/types": "^5.1.0",
|
||||
"@material-ui/utils": "^4.10.2",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.4",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"popper.js": "1.16.1-lts",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0",
|
||||
"react-transition-group": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
|
||||
"integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@material-ui/types": "^5.1.0",
|
||||
"@material-ui/utils": "^4.9.6",
|
||||
"clsx": "^1.0.4",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"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.9.14",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
|
||||
"integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.9.6",
|
||||
"csstype": "^2.5.2",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
|
||||
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.10.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
|
||||
"integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0"
|
||||
}
|
||||
},
|
||||
"@mdx-js/mdx": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.6.tgz",
|
||||
@ -2452,6 +2525,14 @@
|
||||
"csstype": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
|
||||
"integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/rimraf": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.4.tgz",
|
||||
@ -4798,6 +4879,11 @@
|
||||
"mimic-response": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||
},
|
||||
"coa": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
|
||||
@ -5380,6 +5466,15 @@
|
||||
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
|
||||
"dev": true
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
|
||||
@ -6143,6 +6238,15 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
|
||||
"integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^2.6.7"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
@ -9804,6 +9908,11 @@
|
||||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
|
||||
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
|
||||
},
|
||||
"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",
|
||||
@ -10831,6 +10940,11 @@
|
||||
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
|
||||
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
|
||||
},
|
||||
"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-installed-globally": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
|
||||
@ -11355,6 +11469,84 @@
|
||||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
|
||||
"integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
|
||||
"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.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz",
|
||||
"integrity": "sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "^10.3.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz",
|
||||
"integrity": "sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.3.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz",
|
||||
"integrity": "sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.3.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz",
|
||||
"integrity": "sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.3.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz",
|
||||
"integrity": "sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.3.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz",
|
||||
"integrity": "sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "^10.3.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz",
|
||||
"integrity": "sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.8",
|
||||
"jss": "^10.3.0"
|
||||
}
|
||||
},
|
||||
"jsx-ast-utils": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
|
||||
@ -13479,6 +13671,11 @@
|
||||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1-lts",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
|
||||
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.26",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
|
||||
@ -14951,6 +15148,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-icons": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz",
|
||||
"integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==",
|
||||
"requires": {
|
||||
"camelcase": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@ -15002,6 +15207,17 @@
|
||||
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
|
||||
"integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
@ -17492,6 +17708,11 @@
|
||||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tinycolor2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.0",
|
||||
"classnames": "^2.2.6",
|
||||
"firebase": "^7.15.5",
|
||||
"gatsby": "^2.23.12",
|
||||
@ -30,6 +31,7 @@
|
||||
"react-dom": "^16.12.0",
|
||||
"react-firebase-hooks": "^2.2.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-icons": "^3.10.0",
|
||||
"react-loader-spinner": "^3.1.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -3,17 +3,27 @@ import classNames from "classnames";
|
||||
import Loader from "react-loader-spinner";
|
||||
import styles from "./Button.module.css";
|
||||
|
||||
const Button = ({ text, isLoading, outline, className }) => {
|
||||
const getClasses = classNames(styles.container, className, {
|
||||
const Button = ({ title, isLoading, onClick, outline, className }) => {
|
||||
const classes = classNames(styles.container, className, {
|
||||
[styles.outline]: outline,
|
||||
});
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
console.log(e.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={getClasses}>
|
||||
<div
|
||||
tabIndex="0"
|
||||
role="button"
|
||||
onClick={onClick}
|
||||
className={classes}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader type="ThreeDots" color="#FFF" height={18} width={28} />
|
||||
) : (
|
||||
text
|
||||
title
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
.container {
|
||||
padding: 6px 24px;
|
||||
@apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary text-inverse;
|
||||
@apply cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
@apply bg-primary-dark;
|
||||
}
|
||||
|
||||
.container:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
.container.outline {
|
||||
@apply border border-primary bg-inverse text-primary;
|
||||
}
|
||||
|
||||
20
src/modals/AuthModal.js
Normal file
20
src/modals/AuthModal.js
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
import BaseModal from "./BaseModal";
|
||||
import Button from "../components/shared/Button";
|
||||
|
||||
const AuthModal = ({ state }) => {
|
||||
return (
|
||||
<BaseModal state={state} title="Who are you?" action={action}>
|
||||
<p>
|
||||
Reactive Resume needs to know who you are so it can securely
|
||||
authenticate you into the app and show you only your information. Once
|
||||
you are in, you can start building your resume, editing it to add new
|
||||
skills or sharing it with the world!
|
||||
</p>
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
const action = <Button title="Sign in with Google" />;
|
||||
|
||||
export default AuthModal;
|
||||
37
src/modals/BaseModal.js
Normal file
37
src/modals/BaseModal.js
Normal file
@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Modal from "@material-ui/core/Modal";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import styles from "./BaseModal.module.css";
|
||||
import Button from "../components/shared/Button";
|
||||
|
||||
const BaseModal = ({ title, state, children, action }) => {
|
||||
const [isOpen, setOpen] = state;
|
||||
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} onClose={handleClose} className={styles.root}>
|
||||
<div className={styles.modal}>
|
||||
<div className={styles.title}>
|
||||
<h2>{title}</h2>
|
||||
<MdClose size="18" onClick={handleClose} />
|
||||
</div>
|
||||
|
||||
<div className={styles.body}>{children}</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<Button
|
||||
outline
|
||||
title="Cancel"
|
||||
className="mr-8"
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
{action}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseModal;
|
||||
28
src/modals/BaseModal.module.css
Normal file
28
src/modals/BaseModal.module.css
Normal file
@ -0,0 +1,28 @@
|
||||
.root {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: min(600px, calc(100vw - 100px));
|
||||
@apply p-8 rounded bg-white outline-none;
|
||||
}
|
||||
|
||||
.modal .title {
|
||||
@apply flex items-center justify-between;
|
||||
}
|
||||
|
||||
.modal .title h2 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
.modal .title svg {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.modal .body {
|
||||
@apply my-8;
|
||||
}
|
||||
|
||||
.modal .actions {
|
||||
@apply flex justify-end;
|
||||
}
|
||||
@ -1,9 +1,14 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { graphql } from "gatsby";
|
||||
import GatsbyImage from "gatsby-image";
|
||||
import Button from "../components/shared/Button";
|
||||
import AuthModal from "../modals/AuthModal";
|
||||
|
||||
const Home = ({ data }) => {
|
||||
const [isAuthModalOpen, setAuthModalOpen] = useState(false);
|
||||
|
||||
const handleLogin = () => setAuthModalOpen(true);
|
||||
|
||||
return (
|
||||
<div className="container mt-24">
|
||||
<div className="flex items-center">
|
||||
@ -19,8 +24,9 @@ const Home = ({ data }) => {
|
||||
</h2>
|
||||
|
||||
<div className="mt-12 flex">
|
||||
<Button text="Go to App" />
|
||||
<Button className="ml-8" outline text="Source Code" />
|
||||
<Button title="Login" onClick={handleLogin} />
|
||||
<AuthModal state={[isAuthModalOpen, setAuthModalOpen]} />
|
||||
<Button className="ml-8" outline title="Source Code" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,7 +73,7 @@ const Feature = ({ title, children }) => {
|
||||
return (
|
||||
<div className="mt-16">
|
||||
<h3 className="text-3xl">{title}</h3>
|
||||
<p className="mt-8 text-xl leading-loose">{children}</p>
|
||||
<p className="mt-6 text-lg">{children}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -18,6 +18,10 @@ body {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-justify leading-loose;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-600 font-medium;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user