ready to play

src/components/SelectDifficulty.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { SelectWrapper } from '../App.style';
+
+export enum Difficulty {
+  EASY = 'easy',
+  MEDIUM = 'medium',
+  HARD = 'hard'
+}
+
+type Props = {
+  difficulty: string;
+  setDifficulty: (difficulty: string) => void;
+};
+
+const SelectDifficulty = ({ difficulty, setDifficulty }: Props) => {
+  return (
+    <SelectWrapper
+      value={difficulty}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+        e.preventDefault();
+        setDifficulty(e.target.value);
+      }}
+    >
+      <option value={Difficulty.EASY}>Easy</option>
+      <option value={Difficulty.MEDIUM}>Medium</option>
+      <option value={Difficulty.HARD}>Hard</option>
+    </SelectWrapper>
+  );
+};
+
+export default SelectDifficulty;