first commit

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

@@ -0,0 +1,41 @@
+import Link from "next/link";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon, Skeleton } from "@calcom/ui";
+
+import { CalendarToggleContainer } from "./CalendarToggleContainer";
+import { EventScheduleItem } from "./EventScheduleItem";
+import { EventTypeSelect } from "./EventTypeSelect";
+
+const BackButtonInSidebar = ({ name }: { name: string }) => {
+  return (
+    <Link
+      href="/availability"
+      className="hover:bg-subtle group-hover:text-default text-emphasis group flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2">
+      <Icon
+        name="arrow-left"
+        className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
+      />
+      <Skeleton
+        title={name}
+        as="p"
+        className="max-w-36 min-h-4 truncate font-semibold"
+        loadingClassName="ms-3">
+        {name}
+      </Skeleton>
+    </Link>
+  );
+};
+
+export const TroubleshooterSidebar = () => {
+  const { t } = useLocale();
+
+  return (
+    <div className="relative z-10 hidden h-screen w-full flex-col gap-6 overflow-y-auto py-6 pl-4 pr-6 sm:flex md:pl-0">
+      <BackButtonInSidebar name={t("troubleshooter")} />
+      <EventTypeSelect />
+      <EventScheduleItem />
+      <CalendarToggleContainer />
+    </div>
+  );
+};