src/components/Footer/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import React from "react";
import { IoBug, IoHeart } from "react-icons/io5";
import { Button } from "..";

import * as Styled from "./index.styled";

export function Footer() {
  const showDebugButton = location.hostname == "localhost" || location.port == "3000";
  const [showDebugMenu, setShowDebugMenu] = React.useState<boolean>(false);

  const toggleDebugMenu = React.useCallback(() => {
    setShowDebugMenu(show => !show)
  }, []);

  const clearLocalStorage = React.useCallback(() => {
    localStorage.clear();
    location.reload();
  }, []);

  return (
    <footer>
      <Styled.Text>
        Made with <IoHeart /> by{" "}
        <Styled.Link href="https://epicwolverine.com">
          EpicWolverine
        </Styled.Link>
        {" "}based on the work of{" "}
        <Styled.Link href="https://twitter.com/synowski_maciej">
          Maciej Synowski
        </Styled.Link>
      </Styled.Text>
      {showDebugButton &&
        <Styled.Text>
          <Button onClick={toggleDebugMenu}><IoBug /> Debug Options</Button><br />
          {showDebugMenu &&
            <Button variant="red" onClick={clearLocalStorage}>
              Clear Local Storage & Reload
            </Button>
          }
        </Styled.Text>
      }
    </footer>
  );
}