Skip to content

Commit ad9afa7

Browse files
foderkingfoderking
committed
done basic UI
1 parent c53f77b commit ad9afa7

File tree

6 files changed

+94
-39
lines changed

6 files changed

+94
-39
lines changed

‎pages/components/Dropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Dropdown({ items=[], name, onChange }: Props) {
1010
return (
1111
<div className='dropdown'>
1212
<label htmlFor={name} >{name}</label>
13-
<select name={name} onChange={onChange}>
13+
<select name={name} onChange={onChange} itemType={"select"}>
1414
{
1515
items.map(
1616
each => <option key={each} value={each}>{each}</option>

‎pages/components/Sidebar.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,22 @@ import Dropdown from './Dropdown'
66
export default function RightSideBar({ className, click, options, handleChange, theme_options, themeChange, checkName, checkValue, checkOnchange }) {
77
return (
88
<div className={className}>
9-
<button
10-
onClick={click}
11-
type="button"
12-
className={styles.button}
13-
>Deminify</button>
14-
<Dropdown items={options} name={"Tab Size"} onChange={handleChange} />
15-
<Dropdown items={theme_options} name={"Theme"} onChange={themeChange} />
16-
<Checkbox value={checkValue} name={checkName} onChange={checkOnchange} />
9+
<div className={styles.navbar}>
10+
<span className={styles.active}></span>
11+
<span></span>
12+
</div>
13+
<div className={styles.main}>
14+
<h3> Basic </h3>
15+
<Dropdown items={options} name={"Tab Size"} onChange={handleChange} />
16+
<Dropdown items={theme_options} name={"Theme"} onChange={themeChange} />
17+
<Checkbox value={checkValue} name={checkName} onChange={checkOnchange} />
18+
<Checkbox value={checkValue} name={checkName} onChange={checkOnchange} />
19+
<div className={styles.center}>
20+
<button onClick={click} type="button" className={styles.button} >
21+
Deminify
22+
</button>
23+
</div>
24+
</div>
1725
</div>
1826
)
1927
}

‎pages/index.tsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import Loading from './components/Loading'
99
import Spinner from './components/Spinner'
1010
import { reqData } from './api/parse'
1111

12-
const Editor = dynamic(
13-
() => import('./components/Editor'),
12+
const Editor = dynamic( () => import('./components/Editor'),
1413
{
1514
loading: () => Loading({className: styles.left}),
1615
ssr: false
@@ -21,36 +20,35 @@ const Home: NextPage = () => {
2120
const [code, setCode] = useState("")
2221
const [tab, setTab] = useState("4")
2322
const [current_theme, setTheme] = useState("monokai")
24-
const [rename_vars, setRenameVars] = useState(false)
23+
const [rename_vars, setRenameVars] = useState(true)
2524
const [spin, setSpin] = useState(false)
2625

2726

2827
function deminify(e){
2928
e.preventDefault()
30-
3129
const request: reqData = {
3230
renameVars: rename_vars,
3331
text: code,
3432
tabSize: Number(tab)
3533
}
3634
// setCode("")
3735
setSpin(true)
36+
3837
fetch("/api/parse", {
3938
method: "POST",
4039
body: JSON.stringify(request)
41-
})
42-
.then(
43-
data => data.json()
44-
)
45-
.then(
46-
data => setCode(data.data)
47-
)
48-
.catch (
49-
err => console.log("error", err)
50-
)
51-
.finally(
52-
() => setSpin(false)
53-
)
40+
}).then(
41+
data => data.json()
42+
)
43+
.then(
44+
data => setCode(data.data)
45+
)
46+
.catch (
47+
err => console.log("error", err)
48+
)
49+
.finally(
50+
() => setSpin(false)
51+
)
5452
}
5553

5654
function change(code: string) {
@@ -75,8 +73,8 @@ const Home: NextPage = () => {
7573

7674
<header className={styles.header}>
7775
<Image src="/logo.svg"
78-
width={50}
79-
height={50}
76+
width="40px"
77+
height="40px"
8078
alt="logo"
8179
/>
8280
</header>

‎styles/Home.module.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313
}
1414

1515
.left {
16-
flex: 1 1 70%;
16+
flex: 1 1 auto;
1717
}
1818

1919
.right {
20-
flex: 1 1 30%;
20+
flex: 0 0 22em;
2121
border-top: 3px solid #272822;
22+
display: flex;
2223
}
2324

2425
.header {

‎styles/RightSideBar.module.css

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,46 @@
11
.button {
2-
display: block;
2+
margin: 5px;
3+
flex: 0 0 auto;
4+
justify-content: center;
35
/* border: solid white; */
46
border-width: 0px;
57
border-radius: 0;
6-
background: yellow;
8+
background: #666;
9+
color: whitesmoke;
10+
height: 2em;
11+
width: 5em;
12+
font-size: 16px;
13+
}
14+
15+
.navbar {
16+
flex: 0 0 3em;
17+
display: flex;
18+
flex-direction: column;
19+
}
20+
.active {
21+
background-color: white;
22+
}
23+
.navbar > span {
24+
flex: 0 0 3em;
25+
}
26+
27+
.main {
28+
flex: 1 0 auto;
29+
background-color: white;
730
color: black;
8-
font-size: 18px;
31+
padding: 2em;
32+
color: #666;
33+
}
34+
35+
.main > h3 {
36+
font-size: 32px;
37+
font-weight: 200;
38+
margin: 0 0 18px;
39+
text-align: center;
40+
}
41+
42+
.center {
43+
display: flex;
44+
justify-content: center;
45+
/* font-size: small; */
946
}

‎styles/globals.css

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,26 @@ a {
1616
}
1717

1818
.dropdown {
19-
color:antiquewhite;
20-
display: flex;
21-
flex-direction: row;
22-
width: 10em;
19+
margin-bottom: 20px;
20+
}
21+
22+
.checkbox {
23+
margin-bottom: 10px;
2324
}
2425

2526
.dropdown > label {
26-
flex: 1 1 auto;
27+
/* flex: 1 1 auto; */
28+
display: block;
29+
margin-bottom: 5px;
2730
}
2831
.dropdown > select {
29-
flex: 0 0 auto;
32+
/* flex: 0 0 auto; */
33+
display: block;
34+
width: 100%;
35+
border-radius: 0px;
36+
/* border-width: 0px; */
37+
border-width: 1px 1px 1px 1px;
38+
box-shadow: none;
39+
/* background-color: white; */
40+
font-size: inherit;
3041
}

0 commit comments

Comments
 (0)