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

import styled from "styled-components";
import { GuessState } from "../../types/guess";

//eslint-disable-next-line
const stateColor = (theme: any, active: boolean, state: GuessState | undefined) => {
  if (active)                                return theme.border;
  if (state === GuessState.Correct)          return theme.green;
  if (state === GuessState.PartiallyCorrect) return theme.yellow;
  if (state === GuessState.Incorrect)        return theme.red;
  return theme.border100;
};

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

  display: flex;
  align-items: center;

  background-color: var(--cl-gray-1);

  border: 1px solid ${({ theme, active, state }) => stateColor(theme, active, state)};
  border-left: 4px solid ${({ theme, active, state }) => stateColor(theme, active, state)};

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

export const Text = styled.p`
  margin: 0;
  padding: 0 12px;
  width: 100%;
  font-family: "Roboto Mono", monospace;
  font-size: 0.85rem;
  color: ${({ theme }) => theme.text};
`;