first commit

calcom/packages/features/troubleshooter/Troubleshooter.tsx

@@ -0,0 +1,71 @@
+import StickyBox from "react-sticky-box";
+
+import classNames from "@calcom/lib/classNames";
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
+
+import { LargeCalendar } from "./components/LargeCalendar";
+import { TroubleshooterHeader } from "./components/TroubleshooterHeader";
+import { TroubleshooterSidebar } from "./components/TroubleshooterSidebar";
+import { useInitalizeTroubleshooterStore } from "./store";
+import type { TroubleshooterProps } from "./types";
+
+const extraDaysConfig = {
+  desktop: 7,
+  tablet: 4,
+};
+
+const TroubleshooterComponent = ({ month }: TroubleshooterProps) => {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const isTablet = useMediaQuery("(max-width: 1024px)");
+  const extraDays = isTablet ? extraDaysConfig.tablet : extraDaysConfig.desktop;
+
+  useInitalizeTroubleshooterStore({
+    month: month,
+  });
+
+  return (
+    <>
+      <div
+        className={classNames(
+          "text-default flex min-h-full w-full flex-col items-center overflow-clip",
+          isMobile
+            ? "[--troublehooster-meta-width:0px]"
+            : "[--troublehooster-meta-width:250px] lg:[--troubleshooter-meta-width:430px]"
+        )}>
+        <div
+          style={{
+            display: "grid",
+            width: "100vw",
+            minHeight: "100vh",
+            height: "auto",
+            gridTemplateAreas: `
+            "meta header header"
+            "meta main main"
+            `,
+            gridTemplateColumns: "var(--troubleshooter-meta-width) 1fr",
+            gridTemplateRows: "70px auto",
+          }}
+          className={classNames(
+            "bg-default dark:bg-muted text-default flex min-h-full w-full flex-col items-center sm:transition-[width] sm:duration-300"
+          )}>
+          <div className="bg-default dark:bg-muted sticky top-0 z-10 [grid-area:header]">
+            <TroubleshooterHeader extraDays={extraDays} isMobile={isMobile} />
+          </div>
+          <StickyBox key="meta" className={classNames("relative z-10")}>
+            <div className="ps-6">
+              <TroubleshooterSidebar />
+            </div>
+          </StickyBox>
+
+          <div className="ml[-1px] border-subtle  sticky top-0 [grid-area:main]">
+            <LargeCalendar extraDays={extraDays} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const Troubleshooter = ({ month }: TroubleshooterProps) => {
+  return <TroubleshooterComponent month={month} />;
+};