src/components/Guess/index.styled.ts


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

import styled from "styled-components";

import { GuessState } from "../../types/guess";

export const Container = styled.div<{
  active: boolean;
  state: GuessState | undefined;
}>`
  width: 100%;
  height: 45px;

  margin: 5px auto;

  display: flex;
  align-items: center;

  border-color: ${({ theme, active, state }) => {
    if (active) {
      return theme.border;
    } else if (state === GuessState.PartiallyCorrect) {
      return theme.yellow;
    } else if (state === GuessState.Incorrect) {
      return theme.red;
    } else {
      return theme.border100;
    }
  }};
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;

  color: ${({ theme }) => theme.text};
`;

export const Text = styled.p`
  width: 100%;
  height: max-content;

  padding: 0px 10px;

  font-size: 1rem;
  color: ${({ theme }) => theme.text};
`;