49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Accordion, Badge, Group, Stack, Text } from "@mantine/core";
|
|
import { IconCloud } from "@tabler/icons-react";
|
|
|
|
import type { CoolifyApplicationWithContext } from "@homarr/integrations/types";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import { getBadgeColor, parseStatus } from "./coolify-utils";
|
|
import { ResourceRow } from "./resource-row";
|
|
|
|
interface ApplicationsSectionProps {
|
|
applications: CoolifyApplicationWithContext[];
|
|
baseUrl: string;
|
|
isTiny: boolean;
|
|
}
|
|
|
|
export function ApplicationsSection({ applications, baseUrl, isTiny }: ApplicationsSectionProps) {
|
|
const t = useScopedI18n("widget.coolify");
|
|
const tCommon = useScopedI18n("common");
|
|
const runningApps = applications.filter((app) => parseStatus(app.status ?? "") === "running").length;
|
|
|
|
return (
|
|
<Accordion.Item value="applications">
|
|
<Accordion.Control icon={isTiny ? null : <IconCloud size={16} />}>
|
|
<Group gap="xs">
|
|
<Text size="xs">{tCommon("applications")}</Text>
|
|
<Badge variant="dot" color={getBadgeColor(runningApps, applications.length)} size="xs">
|
|
{runningApps} / {applications.length}
|
|
</Badge>
|
|
</Group>
|
|
</Accordion.Control>
|
|
<Accordion.Panel p={4}>
|
|
{applications.length > 0 ? (
|
|
<Stack gap={4}>
|
|
{applications.map((app) => (
|
|
<ResourceRow key={app.uuid} item={app} baseUrl={baseUrl} isTiny={isTiny} resourceType="application" />
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Text size="sm" c="dimmed" ta="center" py="xs">
|
|
{t("empty.applications")}
|
|
</Text>
|
|
)}
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
);
|
|
}
|