/**
* React Component for displaying a single Augmentation as an accordion.
*
* The header of the accordion contains the Augmentation's name (and level, if
* applicable), and the accordion's panel contains the Augmentation's description.
*/
import React, { useState } from "react";
import { Augmentation } from "../../Augmentation/Augmentation";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess";
type IProps = {
aug: Augmentation;
level?: number | string | null;
};
export function AugmentationAccordion(props: IProps): React.ReactElement {
const [open, setOpen] = useState(false);
let displayName = props.aug.name;
if (props.level != null) {
if (props.aug.name === AugmentationNames.NeuroFluxGovernor) {
displayName += ` - Level ${props.level}`;
}
}
if (typeof props.aug.info === "string") {
return (
setOpen((old) => !old)}>
{displayName}} />
{open ? : }
{props.aug.stats && (
<>
{props.aug.stats}
>
)}
);
}
return (
setOpen((old) => !old)}>
{displayName}} />
{open ? : }
{props.aug.info}
{props.aug.stats && (
<>
{props.aug.stats}
>
)}
);
}