integrate events api (#1802)

Co-authored-by: Nick DeJesus <[email protected]>

site-new/assets/icons/ArrowRight.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={25}
+    height={25}
+    fill="none"
+    {...props}
+  >
+    <path fill="currentColor" d="M4.5 11.5v2h12v2h2v-2h2v-2h-2v-2h-2v2h-12Z" />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.5 7.5h-2v-2h2v2Zm0 0h2v2h-2v-2Z"
+      clipRule="evenodd"
+    />
+    <path fill="currentColor" d="M14.5 17.5h2v-2h-2v2ZM14.5 17.5h-2v2h2v-2Z" />
+  </svg>
+);
+export default ArrowRight;

site-new/lib/utils.ts

@@ -114,3 +114,21 @@ export function typeWriter({
   }
   type();
 }
+
+export const createGoogleCalendarLink = (event) => {
+  const startTime = new Date(event.start)
+    .toISOString()
+    .replace(/-|:|\.\d\d\d/g, "");
+  const endTime = new Date(event.end)
+    .toISOString()
+    .replace(/-|:|\.\d\d\d/g, "");
+  const details = encodeURIComponent(
+    event.description || "No details provided.",
+  );
+  const location = encodeURIComponent(
+    event.location || "No location provided.",
+  );
+  const text = encodeURIComponent(event.summary || "No title");
+
+  return `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${text}&dates=${startTime}/${endTime}&details=${details}&location=${location}`;
+};

site-new/src/components/Calendar/Calendar.tsx

@@ -44,7 +44,7 @@ const Calendar = ({
         <div>FRIDAY</div>
         <div>SATURDAY</div>
       </div>
-      <div className="grid grid-cols-7 gap-[0.5px] border border-solid border-white bg-gray-100 text-sm">
+      <div className="grid grid-cols-7 gap-[0.5px] border border-solid border-white bg-gray-100 text-sm [grid-auto-rows:1fr]">
         {days.map((day, dayIdx) => {
           const isNotInThemonth =
             isBefore(day, firstDayCurrentMonth) ||

site-new/src/components/Calendar/MonthSwitcher.tsx

@@ -1,37 +1,49 @@
 import React from "react";
 import { useCalendar } from "./CalendarCtx";
-import { format } from "date-fns";
+import { add, format } from "date-fns";
 import Heading from "@theme/Heading";
+import { cn } from "@site/lib/utils";
 
-const MonthSwitcher = () => {
+const MonthSwitcher = ({
+  maxDate,
+  minDate,
+  className,
+}: {
+  maxDate: Date;
+  minDate: Date;
+  className?: string;
+}) => {
   const { currentMonth, previousMonth, nextMonth } = useCalendar();
+  const isPreviouseMonthDisabled = add(currentMonth, { months: -1 }) < minDate;
+  const isNextMonthDisabled = add(currentMonth, { months: 1 }) > maxDate;
+
   return (
-    <>
-      <div className="flex w-fit gap-4">
-        <button
-          type="button"
-          onClick={previousMonth}
-          className="unset -my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-        >
-          <span className="chevron rotate-90 cursor-pointer bg-tbd-yellow"></span>
-          <span className="sr-only">Previous month</span>
-        </button>
+    <div className={cn("flex gap-4", className)}>
+      <button
+        type="button"
+        onClick={previousMonth}
+        className="unset -my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 transition-transform hover:-translate-x-2 hover:scale-125 hover:text-gray-500"
+        disabled={isPreviouseMonthDisabled}
+      >
+        <span className="chevron rotate-90 cursor-pointer bg-tbd-yellow"></span>
+        <span className="sr-only">Previous month</span>
+      </button>
 
-        <Heading
-          as="h3"
-          className="mb-0 w-fit min-w-[13ch] flex-auto text-center font-normal text-white"
-        >
-          {format(currentMonth, "MMMM yyyy")}
-        </Heading>
-        <button
-          onClick={nextMonth}
-          type="button"
-          className="unset -my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-        >
-          <span className="chevron -rotate-90 cursor-pointer bg-tbd-yellow"></span>
-        </button>
-      </div>
-    </>
+      <Heading
+        as="h3"
+        className="mb-0 w-fit min-w-[13ch] flex-auto text-center font-normal text-white"
+      >
+        {format(currentMonth, "MMMM yyyy")}
+      </Heading>
+      <button
+        onClick={nextMonth}
+        type="button"
+        className="unset -my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 transition-transform hover:translate-x-2 hover:scale-125 hover:text-gray-500"
+        disabled={isNextMonthDisabled}
+      >
+        <span className="chevron -rotate-90 cursor-pointer bg-tbd-yellow"></span>
+      </button>
+    </div>
   );
 };
 

site-new/src/components/Loading/Loading.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import styles from "./loading.module.css";
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className={styles["loader"]}>
+      <div className={clsx(styles["cell"], styles["d-0"])}></div>
+      <div className={clsx(styles["cell"], styles["d-1"])}></div>
+      <div className={clsx(styles["cell"], styles["d-2"])}></div>
+      <div className={clsx(styles["cell"], styles["d-1"])}></div>
+      <div className={clsx(styles["cell"], styles["d-2"])}></div>
+      <div className={clsx(styles["cell"], styles["d-2"])}></div>
+      <div className={clsx(styles["cell"], styles["d-3"])}></div>
+      <div className={clsx(styles["cell"], styles["d-3"])}></div>
+      <div className={clsx(styles["cell"], styles["d-4"])}></div>
+    </div>
+  );
+};
+
+export default Loading;

site-new/src/components/Loading/index.ts

@@ -0,0 +1 @@
+export { default as Loading } from "./Loading";

site-new/src/components/Loading/loading.module.css

@@ -0,0 +1,102 @@
+/* From Uiverse.io by alexruix */
+.loader {
+	--cell-size: 52px;
+	--cell-spacing: 1px;
+	--cells: 3;
+	--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
+	display: flex;
+	flex-wrap: wrap;
+	width: var(--total-size);
+	height: var(--total-size);
+}
+
+.cell {
+	flex: 0 0 var(--cell-size);
+	margin: var(--cell-spacing);
+	background-color: transparent;
+	box-sizing: border-box;
+	border-radius: 4px;
+	animation: 1.5s ripple ease infinite;
+}
+
+.cell.d-1 {
+	animation-delay: 100ms;
+}
+
+.cell.d-2 {
+	animation-delay: 200ms;
+}
+
+.cell.d-3 {
+	animation-delay: 300ms;
+}
+
+.cell.d-4 {
+	animation-delay: 400ms;
+}
+
+.cell:nth-child(1) {
+	--cell-color: #FFF870;
+	/* tbd-yellow-tint-2 */
+}
+
+.cell:nth-child(2) {
+	--cell-color: #FFF53D;
+	/* tbd-yellow-tint-1 */
+}
+
+.cell:nth-child(3) {
+	--cell-color: #FFEC19;
+	/* tbd-yellow */
+}
+
+.cell:nth-child(4) {
+	--cell-color: #FAE100;
+	/* tbd-yellow-shade-1 */
+}
+
+.cell:nth-child(5) {
+	--cell-color: #F5D800;
+	/* tbd-yellow-shade-2 */
+}
+
+.cell:nth-child(6) {
+	--cell-color: #FFF870;
+	/* tbd-yellow-tint-2 */
+}
+
+.cell:nth-child(7) {
+	--cell-color: #FFF53D;
+	/* tbd-yellow-tint-1 */
+}
+
+.cell:nth-child(8) {
+	--cell-color: #FFEC19;
+	/* tbd-yellow */
+}
+
+.cell:nth-child(9) {
+	--cell-color: #FAE100;
+}
+
+
+
+
+/*Animation*/
+@keyframes ripple {
+	0% {
+		background-color: transparent;
+	}
+
+	30% {
+		background-color: var(--cell-color);
+	}
+
+	60% {
+		background-color: transparent;
+	}
+
+	100% {
+		background-color: transparent;
+	}
+}

site-new/src/css/custom.css

@@ -648,7 +648,9 @@ a:has(.footer__logo) {
 		@apply p;
 	}
 
-
+	button {
+		@apply font-spaceGrotesk text-xs leading-[100%] font-medium lg:text-lg
+	}
 }
 
 .sidenav-list-header {