Spaces:
Build error
Build error
File size: 1,868 Bytes
b59aa07 |
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 57 58 59 60 61 62 63 64 65 |
import React from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { code } from "../markdown/code";
import { ol, ul } from "../markdown/list";
import ArrowDown from "#/icons/angle-down-solid.svg?react";
import ArrowUp from "#/icons/angle-up-solid.svg?react";
import { SuccessIndicator } from "./success-indicator";
import { ObservationResultStatus } from "./event-content-helpers/get-observation-result";
interface GenericEventMessageProps {
title: React.ReactNode;
details: string | React.ReactNode;
success?: ObservationResultStatus;
}
export function GenericEventMessage({
title,
details,
success,
}: GenericEventMessageProps) {
const [showDetails, setShowDetails] = React.useState(false);
return (
<div className="flex flex-col gap-2 border-l-2 pl-2 my-2 py-2 border-neutral-300 text-sm w-full">
<div className="flex items-center justify-between font-bold text-neutral-300">
<div>
{title}
{details && (
<button
type="button"
onClick={() => setShowDetails((prev) => !prev)}
className="cursor-pointer text-left"
>
{showDetails ? (
<ArrowUp className="h-4 w-4 ml-2 inline fill-neutral-300" />
) : (
<ArrowDown className="h-4 w-4 ml-2 inline fill-neutral-300" />
)}
</button>
)}
</div>
{success && <SuccessIndicator status={success} />}
</div>
{showDetails &&
(typeof details === "string" ? (
<Markdown
components={{
code,
ul,
ol,
}}
remarkPlugins={[remarkGfm]}
>
{details}
</Markdown>
) : (
details
))}
</div>
);
}
|