src/components/InfoPopUp/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

import { Button } from "..";

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

interface Props {
  onClose: () => void;
}

export function InfoPopUp({ onClose }: Props) {
  return (
    <Styled.Container>
      <Styled.PopUp>
        <h1>HOW TO PLAY</h1>
        <Styled.Spacer />
        <Styled.Section>
          <p>
            Listen to the audio clip, then find the correct song in the list.
          </p>
        </Styled.Section>
        <Styled.Section>
          <p>Skipped or incorrect attempts unlock more of the intro.</p>
        </Styled.Section>
        <Styled.Section>
          <p>Answer in as few tries as possible and share your score!</p>
        </Styled.Section>
        <Styled.Spacer />
        <Styled.Section>
          <p>⬜ Skipped</p>
          <p>🟥 Incorrect Song, Incorrect Artist</p>
          <p>🟨 Correct Artist, Incorrect Song</p>
          <p>🟩 You guessed it!</p>
        </Styled.Section>
        <Button variant="green" style={{ marginTop: 20 }} onClick={onClose}>
          Play
        </Button>
      </Styled.PopUp>
    </Styled.Container>
  );
}