45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { Button, Card, Group, Stack, Text } from "@mantine/core";
|
|
|
|
import { objectEntries } from "@homarr/common";
|
|
import type { MaybePromise } from "@homarr/common/types";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
interface ImportSummaryCardProps {
|
|
counts: { apps: number; boards: number; integrations: number; credentialUsers: number };
|
|
loading: boolean;
|
|
onSubmit: () => MaybePromise<void>;
|
|
}
|
|
|
|
export const ImportSummaryCard = ({ counts, onSubmit, loading }: ImportSummaryCardProps) => {
|
|
const tSummary = useScopedI18n("init.step.import.summary");
|
|
return (
|
|
<Card w={64 * 12 + 8} maw="90vw">
|
|
<Stack gap="sm">
|
|
<Stack gap={0}>
|
|
<Text fw={500}>{tSummary("title")}</Text>
|
|
<Text size="sm" c="gray.6">
|
|
{tSummary("description")}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack gap="xs">
|
|
{objectEntries(counts).map(([key, count]) => (
|
|
<Card key={key} withBorder p="sm">
|
|
<Group justify="space-between" align="center">
|
|
<Text fw={500} size="sm">
|
|
{tSummary(`entities.${key}`)}
|
|
</Text>
|
|
<Text size="sm">{count}</Text>
|
|
</Group>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
|
|
<Button onClick={onSubmit} loading={loading}>
|
|
{tSummary("action.import")}
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
};
|