diff --git a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
index b4064b88a3..354ccbabb0 100644
--- a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
+++ b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
@@ -1,13 +1,60 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
import { Badge, Button, Switch } from "@calcom/ui";
import { TroubleshooterListItemContainer } from "./TroubleshooterListItemContainer";
-function CalendarToggleItem() {
+const SELECTION_COLORS = ["#f97316", "#84cc16", "#06b6d4", "#8b5cf6", "#ec4899", "#f43f5e"];
+
+interface CalendarToggleItemProps {
+ title: string;
+ subtitle: string;
+ colorDot?: string;
+ status: "connected" | "not_found";
+ calendars?: {
+ active?: boolean;
+ name?: string;
+ }[];
+}
+function CalendarToggleItem(props: CalendarToggleItemProps) {
+ const badgeStatus = props.status === "connected" ? "green" : "orange";
+ const badgeText = props.status === "connected" ? "Connected" : "Not found";
return (
{t("calendars_were_checking_for_conflicts")}
-