import dayjs from "@calcom/dayjs"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import { Badge, Button, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon, } from "@calcom/ui"; export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number]; const ApiKeyListItem = ({ apiKey, lastItem, onEditClick, }: { apiKey: TApiKeys; lastItem: boolean; onEditClick: () => void; }) => { const { t } = useLocale(); const utils = trpc.useContext(); const isExpired = apiKey?.expiresAt ? apiKey.expiresAt < new Date() : null; const neverExpires = apiKey?.expiresAt === null; const deleteApiKey = trpc.viewer.apiKeys.delete.useMutation({ async onSuccess() { await utils.viewer.apiKeys.list.invalidate(); }, }); return (

{apiKey?.note ? apiKey.note : t("api_key_no_note")}

{!neverExpires && isExpired && ( {t("expired")} )} {!isExpired && ( {t("active")} )}

{" "} {neverExpires ? (

{t("api_key_never_expires")}
) : ( `${isExpired ? t("expired") : t("expires")} ${dayjs(apiKey?.expiresAt?.toString()).fromNow()}` )}

); }; export default ApiKeyListItem;