36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
|
import { ReactNode } from "react";
|
||
|
|
|
||
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||
|
|
import { Badge, ListItemText } from "@calcom/ui";
|
||
|
|
|
||
|
|
interface AppListCardProps {
|
||
|
|
logo?: string;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
actions?: ReactNode;
|
||
|
|
isDefault?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AppListCard(props: AppListCardProps) {
|
||
|
|
const { t } = useLocale();
|
||
|
|
const { logo, title, description, actions, isDefault } = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-4">
|
||
|
|
<div className="flex items-center gap-x-3">
|
||
|
|
{logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
|
||
|
|
|
||
|
|
<div className="flex grow flex-col gap-y-1 truncate">
|
||
|
|
<div className="flex items-center gap-x-2">
|
||
|
|
<h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
|
||
|
|
{isDefault ? <Badge variant="green">{t("default")}</Badge> : null}
|
||
|
|
</div>
|
||
|
|
<ListItemText component="p">{description}</ListItemText>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{actions}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|