b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
import { CalendarSwitch } from "./CalendarSwitch";
|
|
|
|
interface IConnectedCalendarItem {
|
|
name: string;
|
|
logo: string;
|
|
externalId?: string;
|
|
integrationType: string;
|
|
calendars?: {
|
|
primary: true | null;
|
|
isSelected: boolean;
|
|
credentialId: number;
|
|
name?: string | undefined;
|
|
readOnly?: boolean | undefined;
|
|
userId?: number | undefined;
|
|
integration?: string | undefined;
|
|
externalId: string;
|
|
}[];
|
|
}
|
|
|
|
const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
|
|
const { name, logo, externalId, calendars, integrationType } = prop;
|
|
const { t } = useLocale();
|
|
return (
|
|
<>
|
|
<div className="flex flex-row items-center p-4">
|
|
<img src={logo} alt={name} className="m-1 h-8 w-8" />
|
|
<div className="mx-4">
|
|
<p className="font-sans text-sm font-bold leading-5">
|
|
{name}
|
|
{/* Temporarily removed till we use it on another place */}
|
|
{/* <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
|
|
{t("default")}
|
|
</span> */}
|
|
</p>
|
|
<div className="fle-row flex">
|
|
<span
|
|
title={externalId}
|
|
className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
|
|
{externalId}{" "}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/* Temporarily removed */}
|
|
{/* <Button
|
|
color="minimal"
|
|
type="button"
|
|
className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm">
|
|
{t("edit")}
|
|
</Button> */}
|
|
</div>
|
|
<div className="h-[1px] w-full border-b border-gray-200" />
|
|
<div>
|
|
<ul className="p-4">
|
|
{calendars?.map((calendar, i) => (
|
|
<CalendarSwitch
|
|
key={calendar.externalId}
|
|
externalId={calendar.externalId}
|
|
title={calendar.name || "Nameless Calendar"}
|
|
name={calendar.name || "Nameless Calendar"}
|
|
type={integrationType}
|
|
isChecked={calendar.isSelected}
|
|
isLastItemInList={i === calendars.length - 1}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { ConnectedCalendarItem };
|