62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Button, Skeleton, Stack, Text } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import type { BrokerageEvent } from "../../api/useBrokerageEvents";
|
|
|
|
import { brokerageEventKey } from "../../model/event-key";
|
|
import { BrokerageEventCard } from "../BrokerageEventCard";
|
|
|
|
type BrokerageEventsPreviewProps = {
|
|
events: BrokerageEventsPreviewState;
|
|
moreLabel?: string;
|
|
};
|
|
|
|
type BrokerageEventsPreviewState
|
|
= | {
|
|
items: BrokerageEvent[];
|
|
state: "loaded" | "partial";
|
|
to: string;
|
|
}
|
|
| { state: "empty"
|
|
| "error"
|
|
| "loading"; to: string; };
|
|
|
|
const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
|
|
const { events } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack gap="sm">
|
|
{events.state === "loading" && (
|
|
<LoadingSkeleton label={t("events.recentLoading")}>
|
|
{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
|
|
</LoadingSkeleton>
|
|
)}
|
|
|
|
{events.state === "error" && <Text c="dimmed">{t("states.unavailableText")}</Text>}
|
|
|
|
{events.state === "empty" && <Text c="dimmed">{t("events.recentEmpty")}</Text>}
|
|
|
|
{events.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
|
|
|
|
{(events.state === "loaded" || events.state === "partial")
|
|
&& events.items.map(event => (
|
|
<BrokerageEventCard
|
|
event={event}
|
|
key={brokerageEventKey(event)}
|
|
/>
|
|
))}
|
|
|
|
<Button component={Link} to={events.to} variant="subtle">
|
|
{props.moreLabel ?? t("events.open")}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { BrokerageEventsPreview, type BrokerageEventsPreviewState };
|