first commit

calcom/packages/features/troubleshooter/components/AvailabilitySchedulesContainer.tsx

@@ -0,0 +1,38 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Badge, Button, Switch } from "@calcom/ui";
+
+import { TroubleshooterListItemContainer } from "./TroubleshooterListItemContainer";
+
+function AvailabiltyItem() {
+  const { t } = useLocale();
+  return (
+    <TroubleshooterListItemContainer
+      title="Office Hours"
+      subtitle="Mon-Fri; 9:00 AM - 5:00 PM"
+      suffixSlot={
+        <div>
+          <Badge variant="green" withDot size="sm">
+            Connected
+          </Badge>
+        </div>
+      }>
+      <div className="flex flex-col gap-3">
+        <p className="text-subtle text-sm font-medium leading-none">{t("date_overrides")}</p>
+        <Switch label="google@calendar.com" />
+      </div>
+    </TroubleshooterListItemContainer>
+  );
+}
+
+export function AvailabiltySchedulesContainer() {
+  const { t } = useLocale();
+  return (
+    <div className="flex flex-col space-y-3">
+      <p className="text-sm font-medium leading-none">{t("availabilty_schedules")}</p>
+      <AvailabiltyItem />
+      <Button color="secondary" className="justify-center gap-2">
+        {t("manage_availabilty_schedules")}
+      </Button>
+    </div>
+  );
+}