forked from codemistic/Web-Development
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathApp.js
More file actions
101 lines (95 loc) · 2.57 KB
/
App.js
File metadata and controls
101 lines (95 loc) · 2.57 KB
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// import logo from './logo.svg';
import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";
import { Container } from "@mui/material";
import Header from "./components/Header/Header";
import Definations from "./components/Definations/Definations";
import { alpha, styled } from "@mui/material/styles";
import { grey } from "@mui/material/colors";
import Switch from "@mui/material/Switch";
function App() {
const [word, setWord] = useState("");
const [meanings, setMeanings] = useState([]);
const [category, setCategory] = useState("en");
const [lightMode, setLightMode] = useState(true);
const DarkMode = styled(Switch)(({ theme }) => ({
"& .MuiSwitch-switchBase.Mui-checked": {
color: grey[500],
"&:hover": {
backgroundColor: alpha(grey[500], theme.palette.action.hoverOpacity),
},
},
"& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
backgroundColor: grey[500],
},
}));
const dictionaryApi = async () => {
try {
const data = await axios.get(
`https://api.dictionaryapi.dev/api/v2/entries/${category}/${word}`
);
console.log(data);
setMeanings(data.data);
// console.log(meanings);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
dictionaryApi();
// eslint-disable-next-line
}, [category, word]);
return (
<div
className="App"
style={{
height: "100vh",
backgroundColor: lightMode ? "#fff" : "#282c34",
color: lightMode ? "#282c34" : "#fff",
transition: "all 0.5s linear",
}}
>
<Container
maxWidth="md"
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
justifyContent: "space-evenly",
}}
>
<div
style={{
position: "absolute",
top: 0,
right: 15,
justifyContent: "space-evenly",
}}
>
<span>{lightMode ? "Light" : "Dark"} Mode: </span>
<DarkMode
checked={lightMode}
onChange={() => setLightMode(!lightMode)}
/>
</div>
<Header
category={category}
setCategory={setCategory}
word={word}
setWord={setWord}
lightMode={lightMode}
/>
{meanings && (
<Definations
category={category}
word={word}
meanings={meanings}
lightMode={lightMode}
/>
)}
</Container>
</div>
);
}
export default App;