leaky-ships/leaky-ships/components/EventBar.tsx

38 lines
982 B
TypeScript

import React, { Dispatch, SetStateAction } from "react"
import { Items, Target } from "../interfaces/frontend"
import Item from "./Item"
function EventBar({
props: { setMode, setTarget },
}: {
props: {
setMode: Dispatch<SetStateAction<number>>
setTarget: Dispatch<SetStateAction<Target>>
}
}) {
const items: Items[] = [
{ icon: "burger-menu", text: "Menu" },
{ icon: "radar", text: "Radar scan", mode: 0, amount: 1 },
{ icon: "torpedo", text: "Fire torpedo", mode: 1, amount: 1 },
{ icon: "scope", text: "Fire missile", mode: 2 },
{ icon: "gear", text: "Settings" },
]
return (
<div className="event-bar">
{items.map((e, i) => (
<Item
key={i}
props={{
...e,
callback: () => {
if (e.mode !== undefined) setMode(e.mode)
setTarget((e) => ({ ...e, show: false }))
},
}}
/>
))}
</div>
)
}
export default EventBar