├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── img
    │   │   └── cover.jpeg
    │   └── icons
    │   │   └── index.js
    ├── styles
    │   ├── Post.css
    │   ├── Code.css
    │   └── App.css
    ├── App.js
    ├── index.js
    ├── components
    │   ├── Post.js
    │   └── Code.js
    └── tutorials
    │   └── tutorial1.md
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljaviertovar/blog-markdown/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljaviertovar/blog-markdown/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljaviertovar/blog-markdown/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/assets/img/cover.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljaviertovar/blog-markdown/HEAD/src/assets/img/cover.jpeg


--------------------------------------------------------------------------------
/src/styles/Post.css:
--------------------------------------------------------------------------------
1 | .article-wrapper {
2 |   padding: 2rem;
3 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
4 | }
5 | 
6 | .article__cover img {
7 |   width: 100%;
8 | }


--------------------------------------------------------------------------------
/src/styles/Code.css:
--------------------------------------------------------------------------------
 1 | .code {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .code pre {
 6 |   padding-top: 2rem !important;
 7 |   transition: .3s ease all;
 8 | }
 9 | 
10 | .code__icons {
11 |   position: absolute;
12 |   top: 0;
13 |   right: 0;
14 |   z-index: 1;
15 | }
16 | 
17 | .code__icons button {
18 |   background-color: transparent;
19 |   border: none;
20 |   padding: 10px;
21 |   cursor: pointer;
22 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Post from './components/Post'
 2 | 
 3 | import { LogoIcon } from './assets/icons'
 4 | import './styles/App.css'
 5 | 
 6 | const App = () => {
 7 |   return (
 8 |     <>
 9 |       <header className='header'>
10 |         <div className='header__content'>
11 |           <div className='logo'><LogoIcon /><strong>My Blog Tutorials</strong></div>
12 |         </div>
13 |       </header>
14 |       <main className='main'>
15 |         <Post />
16 |       </main>
17 |     </>
18 |   )
19 | }
20 | 
21 | export default App
22 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | // import reportWebVitals from './reportWebVitals';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 | // reportWebVitals();
17 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📑 My Blog Tutorials
 2 | 
 3 | Tutorials blog made white React and Markdown, darkmode and copy to clipboard.
 4 | 
 5 | ### Front-end
 6 | * React js
 7 | * markdown-to-jsx
 8 | * react-syntax-highlighter
 9 | * react-copy-to-clipboard
10 | 
11 | ### Installig
12 | 
13 | ```
14 | npm run install
15 | ```
16 | 
17 | ### Running app
18 | 
19 | ```
20 | npm run start
21 | ```
22 | 
23 | <hr>
24 | 
25 | [🚀 See the demo here.](https://my-blog-tutorials.netlify.app/)
26 | 
27 | This app is explained in the following [📰 post](https://medium.com/bitsrc/build-a-blog-with-react-and-markdown-files-30d969ce62d5).
28 | 
29 | ![image](https://user-images.githubusercontent.com/34925280/189154683-86d6ad0c-f405-42b1-962b-7d58e03b50cb.png)
30 | ![image](https://user-images.githubusercontent.com/34925280/189154774-0c5c5c57-73ec-4c97-a4f8-9bac99b051da.png)
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-markdown",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.2",
 7 |     "@testing-library/react": "^12.1.3",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "markdown-to-jsx": "^7.1.6",
10 |     "react": "^17.0.2",
11 |     "react-copy-to-clipboard": "^5.0.4",
12 |     "react-dom": "^17.0.2",
13 |     "react-scripts": "5.0.0",
14 |     "react-syntax-highlighter": "^15.4.5",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/Post.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react"
 2 | import Markdown from "markdown-to-jsx"
 3 | import Code from "./Code"
 4 | 
 5 | import cover from '../assets/img/cover.jpeg'
 6 | import '../styles/Post.css'
 7 | 
 8 | const Post = () => {
 9 |   const [postContent, setPostcontent] = useState('')
10 |   const [isDark, setIsDark] = useState(true)
11 | 
12 |   useEffect(() => {
13 |     import('../tutorials/tutorial1.md')
14 |       .then(res =>
15 |         fetch(res.default)
16 |           .then(response => response.text())
17 |           .then(response => setPostcontent(response))
18 |           .catch(err => console.log(err))
19 |       )
20 |   }, [])
21 | 
22 |   return (
23 |     <div className="article-wrapper">
24 |       <article>
25 |         <header>
26 |           <div className="article__cover">
27 |             <img
28 |               src={cover}
29 |               alt="my-cover"
30 |             />
31 |           </div>
32 |         </header>
33 |         <main>
34 |           <Markdown
35 |             options={{
36 |               overrides: {
37 |                 Code: {
38 |                   component: Code,
39 |                   props: {
40 |                     isDark,
41 |                     setIsDark
42 |                   }
43 |                 }
44 |               }
45 |             }}
46 |           >
47 |             {postContent}
48 |           </Markdown>
49 |         </main>
50 |       </article>
51 |     </div>
52 |   )
53 | }
54 | 
55 | export default Post


--------------------------------------------------------------------------------
/src/components/Code.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | import { CopyToClipboard } from "react-copy-to-clipboard"
 3 | import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 4 | import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
 5 | import { materialDark, materialLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 6 | 
 7 | import { CopyIcon, PasteIcon, SunIcon, MoonIcon } from "../assets/icons"
 8 | import '../styles/Code.css'
 9 | 
10 | const Code = ({ children, language, isDark, setIsDark }) => {
11 |   const [isCopied, setIsCopied] = useState(false)
12 | 
13 |   SyntaxHighlighter.registerLanguage('jsx', jsx);
14 | 
15 |   const setCopied = () => {
16 |     setIsCopied(true)
17 |     setTimeout(() => { setIsCopied(false) }, 1000);
18 |   }
19 | 
20 |   return (
21 |     <div className="code">
22 |       <div className="code__icons">
23 |         <button onClick={() => setIsDark(!isDark)}>
24 |           {isDark ? <MoonIcon /> : <SunIcon />}
25 |         </button>
26 | 
27 |         <CopyToClipboard text={children}>
28 |           <button onClick={() => setCopied()}>
29 |             {isCopied
30 |               ? <span title="Copied!"><PasteIcon /></span>
31 |               : <span title="Copy to Clipboard"><CopyIcon /></span>
32 |             }
33 |           </button>
34 |         </CopyToClipboard>
35 |       </div>
36 | 
37 |       <SyntaxHighlighter language={language} style={isDark ? materialDark : materialLight}>
38 |         {children}
39 |       </SyntaxHighlighter>
40 |     </div>
41 |   )
42 | }
43 | 
44 | export default Code


--------------------------------------------------------------------------------
/src/tutorials/tutorial1.md:
--------------------------------------------------------------------------------
 1 | # Using the State Hook
 2 | 
 3 | The [introduction page](https://reactjs.org/docs/hooks-intro.html) used this example to get familiar with Hooks:
 4 | 
 5 | <Code language="javascript">
 6 | import React, { useState } from 'react';
 7 | function Example() {
 8 |   // Declare a new state variable, which we'll call "count"
 9 |   const [count, setCount] = useState(0);
10 |   return (
11 |     &lt;div>
12 |       &lt;p>You clicked {count} times</p>
13 |       &lt;button onClick={() => setCount(count + 1)}>
14 |         Click me
15 |       </button>
16 |     </div>
17 |   );
18 | }
19 | export default Example;
20 | </Code>
21 | 
22 | We’ll start learning about Hooks by comparing this code to an equivalent class example.
23 | 
24 | # Equivalent Class Example
25 | 
26 | If you used classes in React before, this code should look familiar:
27 | 
28 | <Code language="javascript">
29 | class Example extends React.Component {
30 |   constructor(props) {
31 |     super(props);
32 |     this.state = {
33 |       count: 0
34 |     };
35 |   }
36 | 
37 |   render() {
38 |     return (
39 |       &lt;div>
40 |         &lt;p>You clicked {this.state.count} times</p>
41 |         &lt;button 
42 |           onClick={() => this.setState({ count: this.state.count + 1 })}>
43 |           Click me
44 |         </button>
45 |       </div>
46 |     );
47 |   }
48 | }
49 | </Code>
50 | 
51 | The state starts as `{ count: 0 }`, and we increment state.count when the user clicks a button by calling `this.setState()`. We’ll use snippets from this class throughout the page.
52 | 
53 | > ***Note***
54 | >
55 | > You might be wondering why we’re using a counter here instead of a more realistic example. This is to help us focus on the API while we’re still making our first steps with Hooks.


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>My blog of tutorials</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/styles/App.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --background-body: #292929;
  3 |   --background-content: #1D1D1D;
  4 |   --text-color: #E5E5E5;
  5 |   --primary-color: #4DFF7C;
  6 |   --second-color: #89DDFF;
  7 | }
  8 | 
  9 | body {
 10 |   margin: 0;
 11 |   font-size: 1rem;
 12 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 13 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 14 |     sans-serif;
 15 |   -webkit-font-smoothing: antialiased;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 |   background-color: var(--background-body);
 18 |   color: var(--text-color);
 19 | }
 20 | 
 21 | header.header {
 22 |   position: fixed;
 23 |   width: 100%;
 24 |   height: 3.5rem;
 25 |   top: 0px;
 26 |   left: 0px;
 27 |   background-color: var(--background-content);
 28 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
 29 |   z-index: 10;
 30 | }
 31 | 
 32 | .header__content {
 33 |   max-width: 1280px;
 34 |   padding: 0 1rem;
 35 |   margin: auto;
 36 |   display: flex;
 37 |   justify-content: space-between;
 38 |   align-items: center;
 39 |   position: relative;
 40 |   height: 3.5rem;
 41 |   background-color: var(--background-content);
 42 | }
 43 | 
 44 | .logo {
 45 |   font-size: 20px;
 46 |   display: flex;
 47 |   gap: 0.5rem;
 48 |   align-items: center;
 49 |   color: var(--text-color);
 50 | }
 51 | 
 52 | main.main {
 53 |   width: 50%;
 54 |   margin: auto;
 55 |   margin-bottom: 3rem;
 56 |   margin-top: 4.5rem;
 57 |   background-color: var(--background-content);
 58 |   box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 59 |   border-radius: 3px;
 60 | }
 61 | 
 62 | blockquote {
 63 |   background: rgba(77, 255, 124, 0.2);
 64 |   border-left: 10px solid var(--primary-color);
 65 |   margin: 1.5em 10px;
 66 |   padding: 1em 10px .1em 10px;
 67 |   quotes: "\201C""\201D""\2018""\2019";
 68 | }
 69 | 
 70 | a {
 71 |   color: var(--primary-color);
 72 |   font-weight: 500;
 73 | }
 74 | 
 75 | code {
 76 |   color: var(--second-color);
 77 |   background-color: rgba(137, 221, 255, 0.3);
 78 | }
 79 | 
 80 | .dark-mode-icon {
 81 |   cursor: pointer;
 82 | }
 83 | 
 84 | @media screen and (max-width: 1024px) {
 85 |   main.main {
 86 |     width: 70%;
 87 |   }
 88 | }
 89 | 
 90 | @media screen and (max-width: 920px) {
 91 |   main.main {
 92 |     width: 80%;
 93 |   }
 94 | }
 95 | 
 96 | @media screen and (max-width: 520px) {
 97 |   main.main {
 98 |     width: 90%;
 99 |   }
100 | }


--------------------------------------------------------------------------------
/src/assets/icons/index.js:
--------------------------------------------------------------------------------
 1 | export const CopyIcon = () => (
 2 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18" fill="#88D1EF">
 3 |     <path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />
 4 |   </svg>
 5 | )
 6 | 
 7 | export const PasteIcon = () => (
 8 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="18" height="18" fill="#88D1EF">
 9 |     <path d="M320 64h-49.61C262.1 27.48 230.7 0 192 0S121 27.48 113.6 64H64C28.65 64 0 92.66 0 128v320c0 35.34 28.65 64 64 64h256c35.35 0 64-28.66 64-64V128C384 92.66 355.3 64 320 64zM192 48c13.23 0 24 10.77 24 24S205.2 96 192 96S168 85.23 168 72S178.8 48 192 48zM336 448c0 8.82-7.178 16-16 16H64c-8.822 0-16-7.18-16-16V128c0-8.82 7.178-16 16-16h18.26C80.93 117.1 80 122.4 80 128v16C80 152.8 87.16 160 96 160h192c8.836 0 16-7.164 16-16V128c0-5.559-.9316-10.86-2.264-16H320c8.822 0 16 7.18 16 16V448z" />
10 |   </svg>
11 | )
12 | 
13 | export const LogoIcon = () => (
14 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="28" height="28" fill="#4DFF7C">
15 |     <path d="M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z" />
16 |   </svg>
17 | )
18 | 
19 | export const SunIcon = () => (
20 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18" fill="#88D1EF">
21 |     <path d="M505.2 324.8l-47.73-68.78l47.75-68.81c7.359-10.62 8.797-24.12 3.844-36.06c-4.969-11.94-15.52-20.44-28.22-22.72l-82.39-14.88l-14.89-82.41c-2.281-12.72-10.76-23.25-22.69-28.22c-11.97-4.936-25.42-3.498-36.12 3.844L256 54.49L187.2 6.709C176.5-.6016 163.1-2.039 151.1 2.896c-11.92 4.971-20.4 15.5-22.7 28.19l-14.89 82.44L31.15 128.4C18.42 130.7 7.854 139.2 2.9 151.2C-2.051 163.1-.5996 176.6 6.775 187.2l47.73 68.78l-47.75 68.81c-7.359 10.62-8.795 24.12-3.844 36.06c4.969 11.94 15.52 20.44 28.22 22.72l82.39 14.88l14.89 82.41c2.297 12.72 10.78 23.25 22.7 28.22c11.95 4.906 25.44 3.531 36.09-3.844L256 457.5l68.83 47.78C331.3 509.7 338.8 512 346.3 512c4.906 0 9.859-.9687 14.56-2.906c11.92-4.969 20.4-15.5 22.7-28.19l14.89-82.44l82.37-14.88c12.73-2.281 23.3-10.78 28.25-22.75C514.1 348.9 512.6 335.4 505.2 324.8zM456.8 339.2l-99.61 18l-18 99.63L256 399.1L172.8 456.8l-18-99.63l-99.61-18L112.9 255.1L55.23 172.8l99.61-18l18-99.63L256 112.9l83.15-57.75l18.02 99.66l99.61 18L399.1 255.1L456.8 339.2zM256 143.1c-61.85 0-111.1 50.14-111.1 111.1c0 61.85 50.15 111.1 111.1 111.1s111.1-50.14 111.1-111.1C367.1 194.1 317.8 143.1 256 143.1zM256 319.1c-35.28 0-63.99-28.71-63.99-63.99S220.7 192 256 192s63.99 28.71 63.99 63.1S291.3 319.1 256 319.1z" />
22 |   </svg>
23 | )
24 | 
25 | export const MoonIcon = () => (
26 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18" fill="#88D1EF">
27 |     <path d="M421.6 379.9c-.6641 0-1.35 .0625-2.049 .1953c-11.24 2.143-22.37 3.17-33.32 3.17c-94.81 0-174.1-77.14-174.1-175.5c0-63.19 33.79-121.3 88.73-152.6c8.467-4.812 6.339-17.66-3.279-19.44c-11.2-2.078-29.53-3.746-40.9-3.746C132.3 31.1 32 132.2 32 256c0 123.6 100.1 224 223.8 224c69.04 0 132.1-31.45 173.8-82.93C435.3 389.1 429.1 379.9 421.6 379.9zM255.8 432C158.9 432 80 353 80 256c0-76.32 48.77-141.4 116.7-165.8C175.2 125 163.2 165.6 163.2 207.8c0 99.44 65.13 183.9 154.9 212.8C298.5 428.1 277.4 432 255.8 432z" />
28 |   </svg>
29 | )


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