├── next.config.js
├── .prettierrc
├── public
    ├── favicon.ico
    └── marcus-aurelius.jpg
├── helpers
    ├── general.js
    ├── middleware.js
    └── api.js
├── .gitignore
├── components
    ├── error-message.js
    ├── blockquote.js
    ├── home-view.js
    ├── click-icon.js
    └── global-style.js
├── pages
    ├── api
    │   ├── quote.js
    │   └── quotes.js
    ├── index.js
    └── _app.js
├── .eslintrc
├── package.json
├── LICENCE
├── contexts
    └── quote.js
└── README.md


/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": false,
3 |   "printWidth": 120
4 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benhoneywill/stoic-quotes/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/marcus-aurelius.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benhoneywill/stoic-quotes/HEAD/public/marcus-aurelius.jpg


--------------------------------------------------------------------------------
/helpers/general.js:
--------------------------------------------------------------------------------
1 | export const getIntBetween = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
2 | 
3 | export const shuffle = arr => arr.sort(() => 0.5 - Math.random());
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | 
 4 | # testing
 5 | /coverage
 6 | 
 7 | # production
 8 | /.next
 9 | 
10 | # misc
11 | .DS_Store
12 | .env
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | 


--------------------------------------------------------------------------------
/helpers/middleware.js:
--------------------------------------------------------------------------------
 1 | export const initMiddleware = middleware => (req, res) =>
 2 |   new Promise((resolve, reject) => {
 3 |     middleware(req, res, result => {
 4 |       if (result instanceof Error) {
 5 |         return reject(result);
 6 |       }
 7 |       return resolve(result);
 8 |     });
 9 |   });
10 | 


--------------------------------------------------------------------------------
/components/error-message.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Blockquote from "./blockquote";
 4 | 
 5 | const ErrorMessage = () => (
 6 |   <Blockquote text="Sorry. We are having trouble getting any Stoic quotes right now." author="stoic-quotes.com" />
 7 | );
 8 | 
 9 | ErrorMessage.propTypes = {};
10 | 
11 | export default ErrorMessage;
12 | 


--------------------------------------------------------------------------------
/helpers/api.js:
--------------------------------------------------------------------------------
 1 | import fetch from "isomorphic-fetch";
 2 | 
 3 | const url = process.env.NODE_ENV === "production" ? "https://stoic-quotes.com" : "http://localhost:3000";
 4 | 
 5 | export const fetchQuote = async () => {
 6 |   const res = await fetch(`${url}/api/quote`);
 7 |   return res.json();
 8 | };
 9 | 
10 | export const fetchQuotes = async (num = 10) => {
11 |   const res = await fetch(`${url}/api/quotes?num=${num}`);
12 |   return res.json();
13 | };
14 | 


--------------------------------------------------------------------------------
/pages/api/quote.js:
--------------------------------------------------------------------------------
 1 | import Cors from "cors";
 2 | 
 3 | import data from "../../data/quotes.json";
 4 | import { getIntBetween } from "../../helpers/general";
 5 | import { initMiddleware } from "../../helpers/middleware";
 6 | 
 7 | const cors = initMiddleware(
 8 |   Cors({
 9 |     methods: ["GET"]
10 |   })
11 | );
12 | 
13 | export default async (req, res) => {
14 |   await cors(req, res);
15 |   const randomNum = getIntBetween(0, data.quotes.length - 1);
16 |   res.status(200).json(data.quotes[randomNum]);
17 | };
18 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["airbnb", "airbnb/hooks", "prettier"],
 3 |   "plugins": ["prettier"],
 4 |   "rules": {
 5 |     "prettier/prettier": ["error"],
 6 |     "import/prefer-default-export": "off",
 7 |     "react/jsx-filename-extension": [
 8 |       1,
 9 |       {
10 |         "extensions": [".js", ".jsx"]
11 |       }
12 |     ],
13 |     "react/jsx-props-no-spreading": "off",
14 |     "react/forbid-prop-types": "off"
15 |   },
16 |   "env": {
17 |     "node": true,
18 |     "browser": true,
19 |     "jest": true
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/api/quotes.js:
--------------------------------------------------------------------------------
 1 | import Cors from "cors";
 2 | 
 3 | import data from "../../data/quotes.json";
 4 | import { shuffle } from "../../helpers/general";
 5 | import { initMiddleware } from "../../helpers/middleware";
 6 | 
 7 | const cors = initMiddleware(
 8 |   Cors({
 9 |     methods: ["GET"]
10 |   })
11 | );
12 | 
13 | export default async (req, res) => {
14 |   await cors(req, res);
15 | 
16 |   const { num = 10 } = req.query;
17 |   const count = parseInt(num, 10);
18 | 
19 |   if (Number.isNaN(count) || count <= 0 || count > 100) {
20 |     return res.status(422).json({ error: "`num` must be an integer from 1 to 100." });
21 |   }
22 | 
23 |   const quotes = shuffle(data.quotes).slice(0, count);
24 |   return res.status(200).json(quotes);
25 | };
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stoic-quotes",
 3 |   "scripts": {
 4 |     "dev": "next",
 5 |     "build": "next build",
 6 |     "start": "next start",
 7 |     "lint": "eslint \"**/*.js\""
 8 |   },
 9 |   "dependencies": {
10 |     "@emotion/core": "^10.0.35",
11 |     "@emotion/styled": "^10.0.27",
12 |     "cors": "^2.8.5",
13 |     "isomorphic-fetch": "^3.0.0",
14 |     "next": "^12.1.0",
15 |     "prop-types": "^15.7.2",
16 |     "react": "^17.0.0",
17 |     "react-dom": "^17.0.0"
18 |   },
19 |   "devDependencies": {
20 |     "eslint": "^7.0.0",
21 |     "eslint-config-airbnb": "18.2.1",
22 |     "eslint-config-prettier": "^8.3.0",
23 |     "eslint-plugin-import": "^2.22.0",
24 |     "eslint-plugin-jsx-a11y": "^6.3.1",
25 |     "eslint-plugin-prettier": "^3.1.4",
26 |     "eslint-plugin-react": "^7.20.6",
27 |     "eslint-plugin-react-hooks": "^4.0.0",
28 |     "prettier": "1.19.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | import { fetchQuote } from "../helpers/api";
 5 | import { QuoteProvider } from "../contexts/quote";
 6 | import HomeView from "../components/home-view";
 7 | 
 8 | const HomePage = ({ quote, error }) => (
 9 |   <QuoteProvider initialQuote={quote} serverError={error}>
10 |     <HomeView />
11 |   </QuoteProvider>
12 | );
13 | 
14 | export const getStaticProps = async () => {
15 |   let quote = null;
16 |   let error = null;
17 |   try {
18 |     quote = await fetchQuote();
19 |   } catch (err) {
20 |     error = err;
21 |   }
22 | 
23 |   return { props: { quote, error }, revalidate: 10 };
24 | };
25 | 
26 | HomePage.defaultProps = {
27 |   error: null,
28 |   quote: null
29 | };
30 | 
31 | HomePage.propTypes = {
32 |   error: PropTypes.any,
33 |   quote: PropTypes.shape({
34 |     text: PropTypes.string.isRequired,
35 |     author: PropTypes.string.isRequired
36 |   })
37 | };
38 | 
39 | export default HomePage;
40 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [year] [fullname]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/contexts/quote.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | import { fetchQuote } from "../helpers/api";
 5 | 
 6 | export const quoteContext = React.createContext({ quote: null });
 7 | const { Provider } = quoteContext;
 8 | 
 9 | export const QuoteProvider = ({ children, initialQuote, serverError }) => {
10 |   const [quote, setQuote] = React.useState(initialQuote);
11 |   const [loading, setLoading] = React.useState(false);
12 |   const [error, setError] = React.useState(serverError);
13 | 
14 |   const fetchNewQuote = async () => {
15 |     setLoading(true);
16 |     setError(null);
17 | 
18 |     try {
19 |       const data = await fetchQuote();
20 |       setQuote(data);
21 |     } catch (err) {
22 |       setError(err);
23 |     }
24 | 
25 |     setLoading(false);
26 |   };
27 | 
28 |   return <Provider value={{ quote, loading, error, fetchNewQuote }}>{children}</Provider>;
29 | };
30 | 
31 | QuoteProvider.defaultProps = {
32 |   serverError: null,
33 |   initialQuote: null
34 | };
35 | 
36 | QuoteProvider.propTypes = {
37 |   children: PropTypes.node.isRequired,
38 |   serverError: PropTypes.any,
39 |   initialQuote: PropTypes.shape({
40 |     text: PropTypes.string.isRequired,
41 |     author: PropTypes.string.isRequired
42 |   })
43 | };
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Stoic Quotes
 2 | 
 3 | A simple app that displays random Stoic quotes from Seneca, Marcus Aurelius, and Epictetus.
 4 | 
 5 | [stoic-quotes.com](https://stoic-quotes.com)
 6 | 
 7 | Please feel free to make a pull request if you want to add your favourite Stoic quote to the app 🙂
 8 | 
 9 | # Using the API
10 | 
11 | This app exposes a public API which you are free to use to fetch random Stoic quotes for use in your own applications.
12 | 
13 | ### Endpoints
14 | 
15 | #### Get a random Stoic quote
16 | 
17 | ```
18 | GET https://stoic-quotes.com/api/quote
19 | ```
20 | 
21 | ##### Example JSON response
22 | 
23 | ```json
24 | {
25 |   "text": "All that exists is the seed of what will emerge from it.",
26 |   "author": "Marcus Aurelius"
27 | }
28 | ```
29 | 
30 | #### Get a list of random Stoic quotes
31 | 
32 | ```
33 | GET https://stoic-quotes.com/api/quotes
34 | ```
35 | 
36 | Optionally pass in a `num` param to change the number of quotes returned.
37 | `num` defaults to `10`, and can not be higher than `100`.
38 | 
39 | ```
40 | GET https://stoic-quotes.com/api/quotes?num=10
41 | ```
42 | 
43 | ##### Example JSON response
44 | 
45 | ```json
46 | [
47 |   {
48 |     "text": "All that exists is the seed of what will emerge from it.",
49 |     "author": "Marcus Aurelius"
50 |   },
51 |   {
52 |     "text": "If it doesn't harm your character, how can it harm your life?",
53 |     "author": "Marcus Aurelius"
54 |   }
55 | ]
56 | ```
57 | 


--------------------------------------------------------------------------------
/components/blockquote.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import styled from "@emotion/styled";
 4 | import { keyframes, css } from "@emotion/core";
 5 | 
 6 | const fadeIn = keyframes`
 7 |   0% {
 8 |     opacity: 0;
 9 |   }
10 | 
11 |   100% {
12 |     opacity: 1;
13 |   }
14 | `;
15 | 
16 | const fadeOut = keyframes`
17 |   0% {
18 |     opacity: 1;
19 |   }
20 | 
21 |   100% {
22 |     opacity: 0;
23 |   }
24 | `;
25 | 
26 | const Quote = styled.blockquote`
27 |   max-width: 620px;
28 |   margin: 0;
29 |   animation: ${fadeIn} 0.8s ease-in forwards;
30 |   cursor: default;
31 | 
32 |   ${({ animate }) =>
33 |     animate &&
34 |     css`
35 |       animation: ${fadeOut} 0.4s ease-in forwards;
36 |     `}
37 | `;
38 | 
39 | const Text = styled.p`
40 |   margin: 0;
41 |   font-size: 36px;
42 |   line-height: 1.3;
43 |   cursor: text;
44 | 
45 |   @media (max-width: 620px) {
46 |     font-size: 32px;
47 |   }
48 | `;
49 | 
50 | const Footer = styled.footer`
51 |   text-align: right;
52 |   padding: 30px 30px 0 30px;
53 | `;
54 | 
55 | const Cite = styled.cite`
56 |   font-size: 24px;
57 |   cursor: text;
58 | `;
59 | 
60 | const Blockquote = ({ author, text, animate }) => (
61 |   <Quote animate={animate} onClick={e => e.stopPropagation()}>
62 |     <Text>{text}</Text>
63 |     <Footer>
64 |       <Cite>
65 |         - <span>{author}</span>
66 |       </Cite>
67 |     </Footer>
68 |   </Quote>
69 | );
70 | 
71 | Blockquote.defaultProps = {
72 |   animate: false
73 | };
74 | 
75 | Blockquote.propTypes = {
76 |   text: PropTypes.string.isRequired,
77 |   author: PropTypes.string.isRequired,
78 |   animate: PropTypes.bool
79 | };
80 | 
81 | export default Blockquote;
82 | 


--------------------------------------------------------------------------------
/components/home-view.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | 
 4 | import { quoteContext } from "../contexts/quote";
 5 | import ErrorMessage from "./error-message";
 6 | import Blockquote from "./blockquote";
 7 | import ClickIcon from "./click-icon";
 8 | 
 9 | const Container = styled.div`
10 |   position: relative;
11 |   min-height: 100%;
12 |   width: 100%;
13 |   color: inherit;
14 |   display: flex;
15 |   flex-direction: column;
16 |   justify-content: center;
17 |   align-items: center;
18 |   padding: 10vw 5vw;
19 |   cursor: pointer;
20 |   -webkit-tap-highlight-color: transparent;
21 | 
22 |   &:focus {
23 |     outline: none;
24 |   }
25 | `;
26 | 
27 | const Hint = styled.div`
28 |   position: absolute;
29 |   bottom: 20px;
30 |   right: 20px;
31 | 
32 |   @media (max-width: 620px) {
33 |     right: auto;
34 |     left: 20px;
35 |   }
36 | `;
37 | 
38 | const HomeView = () => {
39 |   const { quote, error, loading, fetchNewQuote } = React.useContext(quoteContext);
40 | 
41 |   const buttonKeyDown = event => {
42 |     if (event.keyCode === 32) {
43 |       event.preventDefault();
44 |     } else if (event.keyCode === 13) {
45 |       event.preventDefault();
46 |       fetchNewQuote();
47 |     }
48 |   };
49 | 
50 |   const buttonKeyUp = event => {
51 |     if (event.keyCode === 32) {
52 |       event.preventDefault();
53 |       fetchNewQuote();
54 |     }
55 |   };
56 | 
57 |   return (
58 |     <Container
59 |       tabIndex="0"
60 |       role="button"
61 |       aria-label="Get a new random quote"
62 |       onClick={fetchNewQuote}
63 |       onKeyDown={buttonKeyDown}
64 |       onKeyUp={buttonKeyUp}
65 |     >
66 |       {!error && quote ? <Blockquote text={quote.text} author={quote.author} animate={loading} /> : <ErrorMessage />}
67 |       <Hint>
68 |         <ClickIcon color="#ffffff" size={64} />
69 |       </Hint>
70 |     </Container>
71 |   );
72 | };
73 | 
74 | export default HomeView;
75 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import NextApp from "next/app";
 2 | import Head from "next/head";
 3 | import React from "react";
 4 | 
 5 | import GlobalStyle from "../components/global-style";
 6 | 
 7 | class App extends NextApp {
 8 |   render() {
 9 |     const { Component, pageProps } = this.props;
10 | 
11 |     const title = "Stoic Quotes | The best quotes from the great Roman Stoics";
12 |     const imgSrc = "https://stoic-quotes.com/marcus-aurelius.jpg";
13 |     const description =
14 |       "The very best Stoic quotes from the three great Roman Stoics: Marcus Aurelius, Seneca, and Epictetus. Presented in bitesize chunks, learn from their wisdom and bring Stoicism into your everyday life.";
15 | 
16 |     return (
17 |       <>
18 |         <Head>
19 |           <title>{title}</title>
20 |           {[
21 |             {
22 |               name: "description",
23 |               content: description
24 |             },
25 |             {
26 |               property: "og:title",
27 |               content: title
28 |             },
29 |             {
30 |               property: "og:description",
31 |               content: description
32 |             },
33 |             {
34 |               property: "og:image",
35 |               content: imgSrc
36 |             },
37 |             {
38 |               name: "twitter:image",
39 |               content: imgSrc
40 |             },
41 |             {
42 |               property: "og:type",
43 |               content: "website"
44 |             },
45 |             {
46 |               name: "twitter:card",
47 |               content: "summary_large_image"
48 |             },
49 |             {
50 |               name: "twitter:creator",
51 |               content: "benhoneywill"
52 |             },
53 |             {
54 |               name: "twitter:title",
55 |               content: title
56 |             },
57 |             {
58 |               name: "twitter:description",
59 |               content: description
60 |             },
61 |             {
62 |               name: "keywords",
63 |               content: "Stoic, Stoicism, Marcus, Aurelius, Seneca, Epictetus, Roman, Philosophy, Quotes, Inspirational"
64 |             },
65 |             {
66 |               name: "theme-color",
67 |               content: "#0c0c0c"
68 |             }
69 |           ].map(props => (
70 |             <meta key={props.name || props.property} {...props} />
71 |           ))}
72 |         </Head>
73 | 
74 |         <GlobalStyle />
75 |         <Component {...pageProps} />
76 |       </>
77 |     );
78 |   }
79 | }
80 | 
81 | export default App;
82 | 


--------------------------------------------------------------------------------
/components/click-icon.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import styled from "@emotion/styled";
  4 | import { keyframes } from "@emotion/core";
  5 | 
  6 | const flash = keyframes`
  7 |   0% { opacity: 0; }
  8 |   50% { opacity: 0.6; }
  9 |   100% { opacity: 0; }
 10 | `;
 11 | 
 12 | const Wrapper = styled.span`
 13 |   .mobile {
 14 |     display: none;
 15 |   }
 16 | 
 17 |   @media (pointer: coarse) {
 18 |     .mobile {
 19 |       display: inline;
 20 |     }
 21 |     .desktop {
 22 |       display: none;
 23 |     }
 24 |   }
 25 | `;
 26 | 
 27 | const G = styled.g`
 28 |   position: relative;
 29 |   opacity: 0.2;
 30 |   animation: ${flash} 3s infinite ease-in-out;
 31 | `;
 32 | 
 33 | const ClickIcon = ({ size, color }) => (
 34 |   <Wrapper>
 35 |     <svg className="desktop" width={size} height={size} viewBox="0 0 1000 1000" fill="none">
 36 |       <G>
 37 |         <path
 38 |           fill={color}
 39 |           d="M391.5,174.2c10.2-6.8,22.3-13.7,36.3-20.7V19.2c0-2.4-0.9-4.5-2.7-6.4c-1.8-1.8-3.9-2.7-6.4-2.7h-18.1 c-2.4,0-4.5,0.9-6.4,2.7c-1.8,1.8-2.7,3.9-2.7,6.4L391.5,174.2z"
 40 |         />
 41 |         <path
 42 |           fill={color}
 43 |           d="M329.8,228.2c8.2-9,16.8-17.5,25.8-25.8L221.3,68.5c-1.7-1.9-3.8-2.9-6.4-2.9c-2.5,0-4.7,1-6.4,2.9l-12.7,12.7 c-1.9,1.7-2.9,3.8-2.9,6.4c0,2.5,1,4.7,2.9,6.4L329.8,228.2z"
 44 |         />
 45 |         <path
 46 |           fill={color}
 47 |           d="M280.8,300.4c7-13.8,13.9-25.9,20.7-36.3h-155c-2.4,0-4.5,0.9-6.4,2.7c-1.8,1.8-2.7,3.9-2.7,6.4v18.1 c0,2.4,0.9,4.5,2.7,6.4s3.9,2.7,6.4,2.7L280.8,300.4z"
 48 |         />
 49 |       </G>
 50 | 
 51 |       <path
 52 |         fill={color}
 53 |         opacity="0.3"
 54 |         d="M608.6,989.9c34.4,0,67.2-6.7,98.5-20.1s58.4-31.5,81.1-54.3c22.7-22.7,40.8-49.8,54.3-81.1 c13.4-31.3,20.1-64.2,20.1-98.5V445.6c0-34.4-6.7-67.2-20.1-98.5S811,288.7,788.2,266c-22.7-22.7-49.8-40.8-81.1-54.3 c-31.3-13.4-64.2-20.1-98.5-20.1h-36.3c-34.4,0-67.2,6.7-98.5,20.1s-58.4,31.5-81.1,54.3c-22.7,22.7-40.8,49.8-54.3,81.1 c-13.4,31.3-20.1,64.2-20.1,98.5V736c0,34.4,6.7,67.2,20.1,98.5s31.5,58.4,54.3,81.1c22.7,22.7,49.8,40.8,81.1,54.3 c31.3,13.4,64.2,20.1,98.5,20.1H608.6z M599.5,518H363.6c-2.4,0-4.5-0.9-6.4-2.7c-1.8-1.8-2.7-3.9-2.7-6.4v-18.1 c0-2.4,0.9-4.5,2.7-6.4c1.8-1.8,3.9-2.7,6.4-2.7h208.7v-245c0-2.4,0.9-4.5,2.7-6.4c1.8-1.8,3.9-2.7,6.4-2.7h18.1 c2.4,0,4.5,0.9,6.4,2.7c1.8,1.8,2.7,3.9,2.7,6.4v272.2c0,2.4-0.9,4.5-2.7,6.4C604.1,517.1,601.9,518,599.5,518z"
 55 |       />
 56 |     </svg>
 57 | 
 58 |     <svg className="mobile" width={size - 15} height={size - 15} viewBox="0 0 1000 1000" fill="none">
 59 |       <G>
 60 |         <path
 61 |           fill={color}
 62 |           d="M273.5,75.1l15.7-15.7c4.3-4.3,11.4-4.3,15.7,0l54.1,54.1c4.3,4.3,4.3,11.4,0,15.7l-15.7,15.7c-4.3,4.3-11.4,4.3-15.7,0 l-54.1-54.1C269.2,86.5,269.2,79.4,273.5,75.1C273.5,75.1,273.5,75.1,273.5,75.1z"
 63 |         />
 64 |         <path
 65 |           fill={color}
 66 |           d="M528.3,113.3l53.9-54c4.3-4.3,11.4-4.3,15.7,0l15.7,15.7c4.3,4.3,4.3,11.4,0,15.7l-53.9,54c-4.3,4.3-11.4,4.3-15.7,0 L528.3,129C523.9,124.7,523.9,117.7,528.3,113.3C528.3,113.3,528.3,113.3,528.3,113.3z"
 67 |         />
 68 |         <path
 69 |           fill={color}
 70 |           d="M585.6,207.2h76.3c6.1,0,11.1,5,11.1,11.1v22.2c0,6.1-5,11.1-11.1,11.1h-76.3c-6.1,0-11.1-5-11.1-11.1v-22.2 C574.5,212.2,579.4,207.2,585.6,207.2z"
 71 |         />
 72 |         <path
 73 |           fill={color}
 74 |           d="M225.2,207.2h76.4c6.1,0,11.1,5,11.1,11.1v22.2c0,6.1-5,11.1-11.1,11.1h-76.4c-6.1,0-11.1-5-11.1-11.1v-22.2 C214.1,212.2,219.1,207.2,225.2,207.2z"
 75 |         />
 76 |         <path
 77 |           fill={color}
 78 |           d="M432.5,0h22.2c6.1,0,11.1,5,11.1,11.1v76.3c0,6.1-5,11.1-11.1,11.1h-22.2c-6.1,0-11.1-5-11.1-11.1V11.1 C421.4,5,426.3,0,432.5,0z"
 79 |         />
 80 |       </G>
 81 | 
 82 |       <path
 83 |         fill={color}
 84 |         opacity="0.3"
 85 |         d="M211.7,653.1l116.7,170.7c21.7,31.4,50.4,57.4,83.8,76c13.1,7.6,21.1,21.6,20.9,36.7v37.4c0,14.5,11.7,26.2,26.2,26.2 c0,0,0,0,0,0h246c14.5,0,26.2-11.7,26.2-26.2v-70.9c0.3-23.9,8.4-47,23.2-65.7c27-34.4,41.8-76.9,42-120.7l0-139.4 c1.4-26.5-18.9-49.2-45.4-50.7c-1.2-0.1-2.5-0.1-3.7-0.1h-1.2c-24.6-1.7-45.9,16.7-47.9,41.3v-40.1c-1.8-24.5-23-42.9-47.5-41.3 l-1.4,0c-27.4,0-49.4,19.1-49.4,42.7l0-38.4c-1-23.5-19.6-42.4-43-44c-29.9-3.1-55.2,17-55.2,42.3l0-201.2 c0-32.2-26.2-58.3-58.4-58.3c-32.2,0-58.2,26.1-58.3,58.3V638l-85-53.3c-19.6-12.3-44-14-65.2-4.6 C204,594.7,194.5,627.9,211.7,653.1z"
 86 |       />
 87 |     </svg>
 88 |   </Wrapper>
 89 | );
 90 | 
 91 | ClickIcon.defaultProps = {
 92 |   size: 100,
 93 |   color: "#111111"
 94 | };
 95 | 
 96 | ClickIcon.propTypes = {
 97 |   size: PropTypes.number,
 98 |   color: PropTypes.string
 99 | };
100 | 
101 | export default ClickIcon;
102 | 


--------------------------------------------------------------------------------
/components/global-style.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Global, css, keyframes } from "@emotion/core";
  3 | 
  4 | const backgroundShift = keyframes`
  5 |   0% { background-position: 100%, 0% 50%; }
  6 |   50% { background-position: 100%, 100% 50%; }
  7 |   100% { background-position: 100%, 0% 50%; }
  8 | `;
  9 | 
 10 | const GlobalStyle = () => (
 11 |   <Global
 12 |     styles={css`
 13 |       *,
 14 |       *:after,
 15 |       *:before {
 16 |         box-sizing: border-box;
 17 |       }
 18 |       html {
 19 |         line-height: 1.15;
 20 |         background-color: #0c0c0c;
 21 |         -webkit-text-size-adjust: 100%;
 22 |         height: 100%;
 23 |       }
 24 |       body {
 25 |         height: 100%;
 26 |         margin: 0;
 27 |         padding: 0;
 28 |         color: rgba(255, 255, 255, 0.9);
 29 |         background-color: #0c0c0c;
 30 |         background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, #0c0c0c 80%, #0c0c0c 100%),
 31 |           linear-gradient(270deg, #111111, #2c2c2c, #111111);
 32 |         background-size: 100%, 800% 800%;
 33 |         animation: ${backgroundShift} 20s ease infinite;
 34 |       }
 35 |       #__next {
 36 |         height: 100%;
 37 |       }
 38 |       main {
 39 |         display: block;
 40 |       }
 41 |       h1 {
 42 |         font-size: 2em;
 43 |         margin: 0.67em 0;
 44 |       }
 45 |       hr {
 46 |         box-sizing: content-box;
 47 |         height: 0;
 48 |         overflow: visible;
 49 |       }
 50 |       pre {
 51 |         font-family: monospace, monospace;
 52 |         font-size: 1em;
 53 |       }
 54 |       a {
 55 |         background-color: transparent;
 56 |       }
 57 |       abbr[title] {
 58 |         border-bottom: none;
 59 |         text-decoration: underline;
 60 |         text-decoration: underline dotted;
 61 |       }
 62 |       b,
 63 |       strong {
 64 |         font-weight: bolder;
 65 |       }
 66 |       code,
 67 |       kbd,
 68 |       samp {
 69 |         font-family: monospace, monospace;
 70 |         font-size: 1em;
 71 |       }
 72 |       small {
 73 |         font-size: 80%;
 74 |       }
 75 |       sub,
 76 |       sup {
 77 |         font-size: 75%;
 78 |         line-height: 0;
 79 |         position: relative;
 80 |         vertical-align: baseline;
 81 |       }
 82 |       sub {
 83 |         bottom: -0.25em;
 84 |       }
 85 |       sup {
 86 |         top: -0.5em;
 87 |       }
 88 |       img {
 89 |         border-style: none;
 90 |       }
 91 |       button,
 92 |       input,
 93 |       optgroup,
 94 |       select,
 95 |       textarea {
 96 |         font-family: inherit;
 97 |         font-size: 100%;
 98 |         line-height: 1.15;
 99 |         margin: 0;
100 |       }
101 |       button,
102 |       input {
103 |         overflow: visible;
104 |       }
105 |       button,
106 |       select {
107 |         text-transform: none;
108 |       }
109 |       button,
110 |       [type="button"],
111 |       [type="reset"],
112 |       [type="submit"] {
113 |         -webkit-appearance: button;
114 |       }
115 |       button::-moz-focus-inner,
116 |       [type="button"]::-moz-focus-inner,
117 |       [type="reset"]::-moz-focus-inner,
118 |       [type="submit"]::-moz-focus-inner {
119 |         border-style: none;
120 |         padding: 0;
121 |       }
122 |       button:-moz-focusring,
123 |       [type="button"]:-moz-focusring,
124 |       [type="reset"]:-moz-focusring,
125 |       [type="submit"]:-moz-focusring {
126 |         outline: 1px dotted ButtonText;
127 |       }
128 |       fieldset {
129 |         padding: 0.35em 0.75em 0.625em;
130 |       }
131 |       legend {
132 |         box-sizing: border-box;
133 |         color: inherit;
134 |         display: table;
135 |         max-width: 100%;
136 |         padding: 0;
137 |         white-space: normal;
138 |       }
139 |       progress {
140 |         vertical-align: baseline;
141 |       }
142 |       textarea {
143 |         overflow: auto;
144 |       }
145 |       [type="checkbox"],
146 |       [type="radio"] {
147 |         box-sizing: border-box;
148 |         padding: 0;
149 |       }
150 |       [type="number"]::-webkit-inner-spin-button,
151 |       [type="number"]::-webkit-outer-spin-button {
152 |         height: auto;
153 |       }
154 |       [type="search"] {
155 |         -webkit-appearance: textfield;
156 |         outline-offset: -2px;
157 |       }
158 |       [type="search"]::-webkit-search-decoration {
159 |         -webkit-appearance: none;
160 |       }
161 |       ::-webkit-file-upload-button {
162 |         -webkit-appearance: button;
163 |         font: inherit;
164 |       }
165 |       details {
166 |         display: block;
167 |       }
168 |       summary {
169 |         display: list-item;
170 |       }
171 |       template {
172 |         display: none;
173 |       }
174 |       [hidden] {
175 |         display: none;
176 |       }
177 |     `}
178 |   />
179 | );
180 | 
181 | export default GlobalStyle;
182 | 


--------------------------------------------------------------------------------