import { useState } from 'react';
import styles from './Dropdown.module.css';
export default function Dropdown({ children, options, onSelect }: { children:never[], options:string[], onSelect: Function }) {
const [selected, setSelected] = useState(options[0]);
const [showOptions, setShowOptions] = useState(false);
return (
<>
<div
className={styles.dropdown_container}
onClick={() => setShowOptions(!showOptions)}
onMouseLeave={() => setShowOptions(false)}>
<div className={styles.absoluteContainer}>
<div className={styles.selectedWrapper}>
<p className={styles.selected}>
{selected}
</p>
<svg fill="#000000" className={styles.svg} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 330 330" xmlSpace="preserve">
<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
</svg>
</div>
<div className={showOptions ? styles.show : styles.hidden}>
<ul className={styles.list}>
{
options.map((elem, key) => {
return elem != selected && <p
className={styles.option}
key={key}
onClick={() => {
setSelected(elem);
setShowOptions(false);
onSelect(elem);
}}
>
{elem}
</p>
})
}
</ul>
</div>
</div>
<div className={styles.selectedWrapper}>
<p className={styles.selected}>
{selected}
</p>
<svg fill="#000000" className={styles.svg} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 330 330" xmlSpace="preserve">
<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
</svg>
</div>
</div>
</>
)
}
.dropdown_container {
background-color: blue;
max-width: 150px;
}
.absoluteContainer {
background-color: blue;
width: 150px;
padding: 8px;
position: absolute;
}
.selectedWrapper > *{
display: inline;
}
.selectedWrapper {
display: flex;
justify-content: space-between;
background-color: white;
border-radius: 10px;
}
.selected {
margin: 0px;
padding: 16px;
}
.svg {
height: 15px;
width: 15px;
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
}
.list {
padding: 0px;
margin: 0px;
}
.option {
background-color: white;
margin: 0px;
padding: 12px;
padding-left: 16px;
border-bottom: 1px solid black;
}
.option:last-child {
border: 0px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.option:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.show {
margin-top: 16px;
display: block;
}
.hidden {
display: none;
}
.dropdown_container:hover > .dropdown{
display: block;
}