A self hosted solution for privately rating and reviewing different sorts of media
keii.dev
1import React, { useState } from 'react'
2import { Add, Tune } from '@mui/icons-material'
3import { IconButton, MenuItem, Switch, TextField, Select, Button, Slider } from '@mui/material'
4import styles from "./options.module.css"
5
6const OptionsFilterComponent = (props) => {
7 return (
8 <div>
9 <div className={styles.title}>
10 Name
11 </div>
12 <TextField className={styles.filter_input} placeholder="Breaking Bad" value={props.filterName} onChange={(e) => props.setFilterName(e.target.value)} />
13
14 <div className={styles.title}>
15 Rating
16 </div>
17 <div className={styles.filter_range}>
18 <Slider value={props.filterRating} onChange={(e) => props.setFilterRating(e.target.value)}/>
19 </div>
20
21 <div className={styles.title}>
22 Category
23 </div>
24 <Select
25 value={props.filterCategory}
26 onChange={(e) => {props.setFilterCategory(e.target.value);}}
27 className={styles.filter_input}
28 >
29 <MenuItem value={"series"}>Series</MenuItem>
30 <MenuItem value={"movie"}>Movie</MenuItem>
31 <MenuItem value={"book"}>Book</MenuItem>
32 <MenuItem value={"podcast"}>Podcast</MenuItem>
33 </Select>
34
35 <div className={styles.hide_watched}>
36 <div>
37 <div className={styles.title}>
38 Hide Unwatched
39 </div>
40 <div className={styles.filter_input}>
41 <Switch checked={props.filterHideUnwatched} onChange={(e) => {props.setFilterHideUnwatched(e.target.checked)}}/>
42 </div>
43 </div>
44
45 <div>
46 <div className={styles.title}>
47 Hide Watched
48 </div>
49 <div className={styles.filter_input}>
50 <Switch checked={props.filterHideWatched} onChange={(e) => {props.setFilterHideWatched(e.target.checked)}}/>
51 </div>
52 </div>
53 </div>
54 </div>
55 )
56}
57
58export default OptionsFilterComponent