60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { WidgetDefinition } from "@site/src/types";
|
|
import { IconExternalLink, TablerIcon } from "@tabler/icons-react";
|
|
|
|
interface IntegrationCapabilitesProps {
|
|
items: (
|
|
| {
|
|
widget: WidgetDefinition;
|
|
note?: string;
|
|
}
|
|
| {
|
|
capability: {
|
|
icon: TablerIcon;
|
|
name: string;
|
|
description: string;
|
|
path: string;
|
|
};
|
|
note?: string;
|
|
}
|
|
)[];
|
|
}
|
|
|
|
export const IntegrationCapabilites = ({ items }: IntegrationCapabilitesProps) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-4 w-full">
|
|
<div className="flex flex-col gap-2">
|
|
{items.map((item) => {
|
|
const capability = "widget" in item ? item.widget : item.capability;
|
|
|
|
return (
|
|
<div
|
|
key={capability.name}
|
|
className="flex gap-6 rounded-xl border border-solid dark:border-[#333] border-[#e5e7eb] p-4 shadow-sm w-full items-center justify-between"
|
|
>
|
|
<div className="flex gap-6 items-center">
|
|
<div className="w-10 h-10 flex justify-center items-center bg-red-500/10 rounded-md">
|
|
<capability.icon size={24} stroke={1.5} className="stroke-red-500" />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-0">
|
|
<span className="text-base font-bold">{capability.name}</span>
|
|
<span className="text-sm dark:text-[#999999] text-[#696969]">{capability.description}</span>
|
|
{item.note && <span className="text-xs text-yellow-500 mt-1">{item.note}</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href={capability.path}
|
|
className="border border-solid border-[#e5e7eb] dark:border-[#333] p-2 py-1 rounded-md gap-2 flex justify-center items-center hover:no-underline hover:bg-slate-100 dark:hover:bg-gray-800"
|
|
>
|
|
<IconExternalLink size={16} stroke={1.5} className="dark:stroke-white stroke-black" />
|
|
<span className="dark:text-white text-black font-medium text-sm">Details</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|