Merge pull request #324 from nick134-bit/main

Client side rendering for calendar

src/components/development-pages/time-zone-calendar.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+
+interface TimeZoneCalendarProps {
+  calendarId: string
+  timeZone?: string 
+  mode?: 'AGENDA' | 'DAY' | 'WEEK' | 'MONTH'
+}
+
+const TimeZoneCalendar: React.FC<TimeZoneCalendarProps> = ({ calendarId, timeZone, mode = "AGENDA" }) => {
+  const [currentTimeZone, setCurrentTimeZone] = useState('America/Los_Angeles');
+
+  useEffect(() => {
+    if (!timeZone) {
+      const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      setCurrentTimeZone(userTimeZone);
+    } else {
+      setCurrentTimeZone(timeZone);
+    }
+  }, [timeZone]);
+
+  const src = `https://calendar.google.com/calendar/embed?src=${calendarId}&ctz=${currentTimeZone}&mode=${mode}`;
+
+  return (
+    <>
+      <iframe
+        className="w-full"
+        src={src}
+        style={{ border: 0 }}
+        width="800"
+        height="600"
+        frameBorder="0"
+      ></iframe>
+    </>
+  );
+};
+
+export default TimeZoneCalendar;

src/content/Development_Page/welcome/index.mdx

@@ -11,6 +11,7 @@ The Akash Network is supported by a diverse group of users, contributors, and su
 
 import GithubButton from "../../../components/mdx-cards/buttons/github-button.astro";
 import CalenderButton from "../../../components/development-pages/calenderbutton.astro";
+import TimeZoneCalendar from '../../../components/development-pages/time-zone-calendar.tsx';
 
 <GithubButton label="Code of Conduct" link="https://github.com/akash-network/community/blob/main/CODE_OF_CONDUCT.md" />
 <GithubButton label="How to Contribute" link="https://github.com/akash-network/community#getting-started-with-contributing" />
@@ -28,21 +29,11 @@ The Akash Network is supported by a diverse group of users, contributors, and su
 
 
 ## Calendar
-
-<div class="bg-background2 border rounded-lg p-4 mb-10 mt-5 flex flex-col gap-4 ">
-  <iframe
-    class="w-full "
-    src={`https://calendar.google.com/calendar/embed?src=c_25e5e3748e4c4ab7a55f41fbc5ebebcc0a03b40fb028785f14159bfaebea12e2%40group.calendar.google.com&ctz=${Intl.DateTimeFormat().resolvedOptions().timeZone || "America/Los_Angeles"}&mode=AGENDA&amp`}
-    style="border: 0"
-    width="800"
-    height="600"
-    frameborder="0"
-
-  ></iframe>
-<CalenderButton/>
+<div class="bg-background2 border rounded-lg p-4 mb-10 mt-5 flex flex-col gap-4">
+    <TimeZoneCalendar client:only calendarId="c_25e5e3748e4c4ab7a55f41fbc5ebebcc0a03b40fb028785f14159bfaebea12e2%40group.calendar.google.com" />
+    <CalenderButton />
 </div>
 
-
 ## Special Interest Groups (SIGs)
 
 SIGs are vertically specialized community groups that are working on foundational elements of Akash Network by implementing and supporting products that are defined by the working groups or smaller feature ideas. SIGs may generally be involved in both defining (spec’ing) as well as building specific products and features. SIGs are persistent groups in that they exist forever.