79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import Dialog from "@mui/material/Dialog";
|
||
import DialogTitle from "@mui/material/DialogTitle";
|
||
import DialogContent from "@mui/material/DialogContent";
|
||
import DialogActions from "@mui/material/DialogActions";
|
||
import Button from "@mui/material/Button";
|
||
import Typography from "@mui/material/Typography";
|
||
import Stack from "@mui/material/Stack";
|
||
import Table from "@mui/material/Table";
|
||
import TableBody from "@mui/material/TableBody";
|
||
import TableCell from "@mui/material/TableCell";
|
||
import TableRow from "@mui/material/TableRow";
|
||
import type { RecipeDetail } from "../types";
|
||
|
||
interface Props {
|
||
open: boolean;
|
||
recipe: RecipeDetail | null;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function RecipeDetailDialog({ open, recipe, onClose }: Props) {
|
||
if (!recipe) return null;
|
||
|
||
return (
|
||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||
<DialogTitle>{recipe.name}</DialogTitle>
|
||
<DialogContent dividers>
|
||
<Typography variant="subtitle1" gutterBottom>
|
||
Level {recipe.level} – {recipe.category} – {recipe.crystal} Crystal
|
||
</Typography>
|
||
{recipe.key_item && (
|
||
<Typography variant="body2" gutterBottom>
|
||
Key Item: {recipe.key_item}
|
||
</Typography>
|
||
)}
|
||
{recipe.subcrafts.length > 0 && (
|
||
<Typography variant="body2" gutterBottom>
|
||
Subcrafts: {recipe.subcrafts
|
||
.map(([c, lvl]: [string, number]) => `${c} (${lvl})`)
|
||
.join(", ")}
|
||
</Typography>
|
||
)}
|
||
<Stack direction="row" spacing={4} sx={{ mt: 2 }}>
|
||
<Stack>
|
||
<Typography variant="h6">Ingredients</Typography>
|
||
<Table size="small">
|
||
<TableBody>
|
||
{recipe.ingredients.map(([name, qty]: [string, number]) => (
|
||
<TableRow key={name}>
|
||
<TableCell>{name}</TableCell>
|
||
<TableCell align="right">{qty}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</Stack>
|
||
<Stack>
|
||
<Typography variant="h6">HQ Yields</Typography>
|
||
<Table size="small">
|
||
<TableBody>
|
||
{recipe.hq_yields.map((hq: [string, number] | null, idx: number) => (
|
||
<TableRow key={idx}>
|
||
<TableCell>HQ{idx + 1}</TableCell>
|
||
<TableCell>
|
||
{hq ? `${hq[0]} x${hq[1]}` : "—"}
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</Stack>
|
||
</Stack>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={onClose}>Close</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
}
|