A self hosted solution for privately rating and reviewing different sorts of media
keii.dev
1import { Add, Tune } from '@mui/icons-material'
2import { IconButton, MenuItem, Switch, TextField, Select, Button } from '@mui/material'
3import React, { useState } from 'react'
4import styles from "./options.module.css"
5
6const OptionsCreateComponent = (props) => {
7
8 let [name, setName] = useState("");
9 let [category, setCategory] = useState("series");
10 let [coverUrl, setCoverUrl] = useState("");
11
12 function createMedia() {
13 let new_data = JSON.parse(JSON.stringify(props.editableData))
14 new_data[name.toLowerCase()] = {
15 "disname": name,
16 "cover_url": coverUrl,
17 "category": category,
18 "seasons": {}
19 };
20 props.setEditableData(new_data)
21 console.log("Created Media")
22
23 setName("")
24 setCoverUrl("")
25 setCategory("series")
26 }
27
28 return (
29 <div>
30 <div className={styles.title}>
31 Name
32 </div>
33 <TextField className={styles.filter_input} placeholder="Breaking Bad" value={name} onChange={(e) => setName(e.target.value)} />
34
35 <div className={styles.title}>
36 Category
37 </div>
38 <Select
39 value={category}
40 onChange={(e) => setCategory(e.target.value)}
41 className={styles.filter_input}
42 >
43 <MenuItem value={"series"}>Series</MenuItem>
44 <MenuItem value={"movie"}>Movie</MenuItem>
45 <MenuItem value={"book"}>Book</MenuItem>
46 <MenuItem value={"podcast"}>Podcast</MenuItem>
47 </Select>
48
49 <div className={styles.title}>
50 Cover url
51 </div>
52 <TextField className={styles.filter_input} placeholder="https://imgur..." value={coverUrl} onChange={(e) => setCoverUrl(e.target.value)} />
53
54 <Button className={styles.create_button} variant="outlined" size="large" startIcon={<Add />} onClick={() => createMedia()}>Create Media</Button>
55 </div>
56 )
57}
58
59export default OptionsCreateComponent