Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 3x 3x 3x 3x | import { Badge } from "@/ahuora-design-system/ui/badge";
import {
ScenarioRead,
useCoreScenarioDestroyMutation,
} from "@/api/apiStore.gen";
import { useProjectId } from "@/hooks/project";
import { ChevronRight, CircleX } from "lucide-react";
import { ScenarioNameBadge } from "./ScenarioNameBadge";
export function ScenarioCard({
scenario,
onClick,
}: {
scenario: ScenarioRead;
onClick?: () => void;
}) {
const id = useProjectId();
const [deleteOptimization] = useCoreScenarioDestroyMutation();
const deleteObjective = () => deleteOptimization({ id: scenario.id });
return (
<div className="flex flex-col rounded-lg bg-muted " aria-label="scenario-card-container">
<div className="flex flex-row justify-between items-center bg-accent rounded-t-lg p-2">
<ScenarioNameBadge scenario={scenario} />
<CircleX
size={17}
onClick={deleteObjective}
aria-label="Delete Scenario"
className="cursor-pointer"
/>
</div>
<div
className="flex flex-col p-2.5 hover:shadow-lg cursor-pointer "
onClick={onClick}
>
<div className="flex flex-row justify-between items-center ">
<p>Click on the card to create scenario. </p>
<ChevronRight size={24} />{" "}
</div>
<div className="flex flex-row gap-2 p-2 items-center ">
{scenario.enable_dynamics && (
<Badge variant="secondary">Dynamic</Badge>
)}
{scenario.enable_optimization && (
<Badge variant="secondary">Optimisation</Badge>
)}
</div>
{/* {optimization.enable_optimization && <Badge variant="secondary">Multi Steady State</Badge>} */}
</div>
</div>
);
}
|