35 lines
777 B
TypeScript
35 lines
777 B
TypeScript
import {useState} from "react"
|
|
|
|
interface SideMenuProps {
|
|
items: {
|
|
label: string
|
|
}[]
|
|
onChange: (index: number) => void
|
|
}
|
|
|
|
export function SideMenu({items, onChange}: SideMenuProps) {
|
|
|
|
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
|
|
return (
|
|
<div>
|
|
<div className="f-c p-2 gap-2 bg-neutral-600 rounded-md text-left cursor-pointer">
|
|
{items.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={index === selectedIndex
|
|
? "bg-neutral-500 p-1 px-2 rounded-md whitespace-nowrap"
|
|
: "p-1 px-2 hover:bg-neutral-500 duration-100 rounded-md whitespace-nowrap"}
|
|
onClick={() => {
|
|
setSelectedIndex(index)
|
|
onChange(index)
|
|
}}>{item.label}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|