Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e56112cfd7 |
@@ -49,7 +49,7 @@ import { useI18n } from "@homarr/translation/client";
|
|||||||
import { IntegrationAvatar } from "../components/integration-avatar";
|
import { IntegrationAvatar } from "../components/integration-avatar";
|
||||||
import { SelectableCard } from "../components/selectable-card";
|
import { SelectableCard } from "../components/selectable-card";
|
||||||
import { selectGridCols } from "../select-grid-layout";
|
import { selectGridCols } from "../select-grid-layout";
|
||||||
import { buildSortedIntegrations, categoryTranslationKeys, filterIntegrations } from "./integration-grid-shared";
|
import { buildSortedIntegrations, filterIntegrations } from "./integration-grid-shared";
|
||||||
import type { IntegrationGridItem } from "./integration-grid-shared";
|
import type { IntegrationGridItem } from "./integration-grid-shared";
|
||||||
|
|
||||||
export interface IntegrationSelectGridProps {
|
export interface IntegrationSelectGridProps {
|
||||||
@@ -134,8 +134,11 @@ const IntegrationCard = ({
|
|||||||
onClick={() => onSelect(integration.kind)}
|
onClick={() => onSelect(integration.kind)}
|
||||||
aria-label={integration.name}
|
aria-label={integration.name}
|
||||||
icon={<IntegrationAvatar kind={integration.kind} size="sm" />}
|
icon={<IntegrationAvatar kind={integration.kind} size="sm" />}
|
||||||
title={integration.name}
|
title={
|
||||||
topRight={<IntegrationCategoryBadges categories={integration.categories} limit={1} />}
|
<Text fw={700} size="md" style={{ whiteSpace: "nowrap" }}>
|
||||||
|
{integration.name}
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
footerLeft={
|
footerLeft={
|
||||||
connectedCount > 0 ? (
|
connectedCount > 0 ? (
|
||||||
<Badge variant="light" color="teal" size="xs" radius="xs">
|
<Badge variant="light" color="teal" size="xs" radius="xs">
|
||||||
@@ -232,24 +235,3 @@ const IntegrationTiedWidgets = ({ widgets, limit }: { widgets: WidgetKind[]; lim
|
|||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const IntegrationCategoryBadges = ({
|
|
||||||
categories,
|
|
||||||
limit,
|
|
||||||
}: {
|
|
||||||
categories: IntegrationGridItem["categories"];
|
|
||||||
limit?: number;
|
|
||||||
}) => {
|
|
||||||
const t = useI18n();
|
|
||||||
const items = limit ? categories.slice(0, limit) : categories;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Group gap={4} wrap="wrap">
|
|
||||||
{items.map((category) => (
|
|
||||||
<Badge key={category} variant="light" size="xs" color="gray" radius="xs">
|
|
||||||
{categoryTranslationKeys[category] ? t(categoryTranslationKeys[category] as never) : category}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</Group>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in new issue
Block a user