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