40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { createRoot } from "react-dom/client";
|
|
import React from "react";
|
|
|
|
type StreamSelectCallback = (selected: string) => void
|
|
|
|
interface MenuProps {
|
|
items: string[]
|
|
selectedItem: string | null
|
|
selectCallback: StreamSelectCallback
|
|
}
|
|
|
|
export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
|
|
const menuitems = () => {
|
|
return (
|
|
<>
|
|
{items.map((value, idx) => {
|
|
if (selectedItem == value) {
|
|
return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
|
|
} else {
|
|
return <li key={idx} onClick={() => {
|
|
selectCallback(value)
|
|
}} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
|
|
}
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<div id="menu">
|
|
<aside>
|
|
<a className="menu-heading" href="#">stream.t-juice.club</a>
|
|
<ul className="menu-list">
|
|
{menuitems()}
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
)
|
|
|
|
}
|