@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/components/addOns/functional/CalendlyWidget.tsx

@@ -1,108 +1,108 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-
-interface CalendlyWidgetProps {
-  calendlyUrl?: string;
-  title?: string;
-  subtitle?: string;
-  mobileHeight?: string;
-  desktopHeight?: string;
-}
-
-const CalendlyWidget = ({
-  calendlyUrl = process.env.CALENDLY_URL || 'https://calendly.com/example/event',
-  title = 'Book Your Free Consultation',
-  subtitle = 'Powered by Calendly • Takes just a moment to book!',
-  mobileHeight = '800px',
-  desktopHeight = '950px',
-}: CalendlyWidgetProps) => {
-  const [isMobile, setIsMobile] = useState(false);
-  const [calendlyLoaded, setCalendlyLoaded] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = 'https://assets.calendly.com/assets/external/widget.js';
-    script.async = true;
-    script.onload = () => setCalendlyLoaded(true);
-    script.onerror = () => console.warn('Calendly script failed to load');
-    document.body.appendChild(script);
-
-    return () => {
-      if (document.body.contains(script)) {
-        document.body.removeChild(script);
-      }
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!process.env.CALENDLY_URL) {
-      console.warn('CALENDLY_URL is not set in environment variables. Using fallback URL: https://calendly.com/example/event');
-    } else if (!calendlyUrl.startsWith('http')) {
-      console.warn('CALENDLY_URL is invalid. Using fallback URL: https://calendly.com/example/event');
-    }
-  }, [calendlyUrl]);
-
-  return (
-    <main className="min-h-screen bg-gradient-to-br from-gray-900 to-indigo-900 py-24 relative overflow-hidden">
-      <div className="absolute inset-0 pointer-events-none">
-        <div className="absolute top-0 left-0 w-72 h-72 bg-indigo-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
-        <div className="absolute bottom-0 right-0 w-72 h-72 bg-purple-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
-      </div>
-
-      <section className="container mx-auto px-4 relative z-10 pt-28">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className="max-w-3xl mx-auto"
-        >
-          <h2 className="text-4xl md:text-5xl font-bold text-center mb-12 text-white">
-            {title.split(' ').map((word, index) => (
-              word.toLowerCase() === 'free' ? (
-                <span key={index} className="text-indigo-400">{word} </span>
-              ) : (
-                `${word} `
-              )
-            ))}
-          </h2>
-          <div
-            className="calendly-inline-widget"
-            data-url={calendlyUrl}
-            style={{
-              minWidth: '320px',
-              height: isMobile ? mobileHeight : desktopHeight,
-              display: calendlyUrl ? 'block' : 'none', // Hide widget if no valid URL
-            }}
-          />
-          <p className="text-center mt-6 text-gray-300 text-sm">{subtitle}</p>
-          {!calendlyLoaded && (
-            <div className="text-center mt-4 bg-white/10 backdrop-blur-md rounded-lg p-3 max-w-sm mx-auto">
-              <p className="text-red-400 text-sm">
-                Loading booking widget... If it doesn’t appear, check your ad blocker or contact support.
-              </p>
-            </div>
-          )}
-          {!calendlyUrl && (
-            <div className="text-center mt-4 bg-white/10 backdrop-blur-md rounded-lg p-3 max-w-sm mx-auto">
-              <p className="text-yellow-400 text-sm">
-                No Calendly URL configured. Please set CALENDLY_URL in your environment variables.
-              </p>
-            </div>
-          )}
-        </motion.div>
-      </section>
-    </main>
-  );
-};
-
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+interface CalendlyWidgetProps {
+  calendlyUrl?: string;
+  title?: string;
+  subtitle?: string;
+  mobileHeight?: string;
+  desktopHeight?: string;
+}
+
+const CalendlyWidget = ({
+  calendlyUrl = process.env.CALENDLY_URL || 'https://calendly.com/example/event',
+  title = 'Book Your Free Consultation',
+  subtitle = 'Powered by Calendly • Takes just a moment to book!',
+  mobileHeight = '800px',
+  desktopHeight = '950px',
+}: CalendlyWidgetProps) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [calendlyLoaded, setCalendlyLoaded] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://assets.calendly.com/assets/external/widget.js';
+    script.async = true;
+    script.onload = () => setCalendlyLoaded(true);
+    script.onerror = () => console.warn('Calendly script failed to load');
+    document.body.appendChild(script);
+
+    return () => {
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!process.env.CALENDLY_URL) {
+      console.warn('CALENDLY_URL is not set in environment variables. Using fallback URL: https://calendly.com/example/event');
+    } else if (!calendlyUrl.startsWith('http')) {
+      console.warn('CALENDLY_URL is invalid. Using fallback URL: https://calendly.com/example/event');
+    }
+  }, [calendlyUrl]);
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-gray-900 to-indigo-900 py-24 relative overflow-hidden">
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-0 left-0 w-72 h-72 bg-indigo-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
+        <div className="absolute bottom-0 right-0 w-72 h-72 bg-purple-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
+      </div>
+
+      <section className="container mx-auto px-4 relative z-10 pt-28">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="max-w-3xl mx-auto"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-center mb-12 text-white">
+            {title.split(' ').map((word, index) => (
+              word.toLowerCase() === 'free' ? (
+                <span key={index} className="text-indigo-400">{word} </span>
+              ) : (
+                `${word} `
+              )
+            ))}
+          </h2>
+          <div
+            className="calendly-inline-widget"
+            data-url={calendlyUrl}
+            style={{
+              minWidth: '320px',
+              height: isMobile ? mobileHeight : desktopHeight,
+              display: calendlyUrl ? 'block' : 'none', // Hide widget if no valid URL
+            }}
+          />
+          <p className="text-center mt-6 text-gray-300 text-sm">{subtitle}</p>
+          {!calendlyLoaded && (
+            <div className="text-center mt-4 bg-white/10 backdrop-blur-md rounded-lg p-3 max-w-sm mx-auto">
+              <p className="text-red-400 text-sm">
+                Loading booking widget... If it doesn’t appear, check your ad blocker or contact support.
+              </p>
+            </div>
+          )}
+          {!calendlyUrl && (
+            <div className="text-center mt-4 bg-white/10 backdrop-blur-md rounded-lg p-3 max-w-sm mx-auto">
+              <p className="text-yellow-400 text-sm">
+                No Calendly URL configured. Please set CALENDLY_URL in your environment variables.
+              </p>
+            </div>
+          )}
+        </motion.div>
+      </section>
+    </main>
+  );
+};
+
 export default CalendlyWidget;

package/components/addOns/functional/ClassList.tsx

@@ -1,146 +1,146 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/other/card";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
-
-interface ClassDescription {
-  name: string;
-  desc: string;
-}
-
-export default function ClassList() {
-  const [classDescriptions, setClassDescriptions] = useState<ClassDescription[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const router = useRouter();
-
-  const numberToDayKey: { [key: number]: string } = {
-    1: "Monday",
-    2: "Tuesday",
-    3: "Wednesday",
-    4: "Thursday",
-    5: "Friday",
-    6: "Saturday",
-    7: "Sunday",
-  };
-
-  const roundToNearestFiveMinutes = (time: string): string => {
-    if (!time) return "";
-    const [hours, minutes] = time.split(":").map(Number);
-    const roundedMinutes = Math.round(minutes / 5) * 5;
-    const adjustedHours = hours + Math.floor(roundedMinutes / 60);
-    const finalMinutes = roundedMinutes % 60;
-    return `${String(adjustedHours).padStart(2, "0")}:${String(finalMinutes).padStart(2, "0")}`;
-  };
-
-  const fetchEvents = async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const response = await fetch("/api/schedule", {
-        headers: { "Content-Type": "application/json" },
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || `Failed to fetch events: ${response.status}`);
-      }
-
-      const result = await response.json();
-      const fetchedClasses = (result.data || []).map((event: any) => ({
-        id: event.id,
-        documentId: event.documentId,
-        name: event.title || "Untitled",
-        startTime: roundToNearestFiveMinutes(event.startTime || "00:00"),
-        endTime: roundToNearestFiveMinutes(event.endTime || "00:00"),
-        daysOfWeek: event.daysOfWeek || [],
-        classDescription: event.classDescription || "",
-      }));
-
-      const updatedSchedule: WeeklySchedule = {
-        Monday: [],
-        Tuesday: [],
-        Wednesday: [],
-        Thursday: [],
-        Friday: [],
-        Saturday: [],
-        Sunday: [],
-      };
-      fetchedClasses.forEach((cls: ScheduleClass) => {
-        cls.daysOfWeek.forEach((dayNum: number) => {
-          const dayKey = numberToDayKey[dayNum];
-          if (dayKey && updatedSchedule[dayKey]) {
-            updatedSchedule[dayKey].push({
-              name: cls.name,
-              startTime: cls.startTime,
-              endTime: cls.endTime,
-              id: cls.id,
-              documentId: cls.documentId,
-              daysOfWeek: cls.daysOfWeek,
-              classDescription: cls.classDescription,
-            });
-          }
-        });
-      });
-
-      const uniqueClassDescriptions: ClassDescription[] = Array.from(
-        new Map(
-          Object.values(updatedSchedule)
-            .flat()
-            .filter((cls): cls is ScheduleClass & { classDescription: string } =>
-              typeof cls.classDescription === "string" && cls.classDescription.length > 0
-            )
-            .map((cls) => [cls.name, { name: cls.name, desc: cls.classDescription }])
-        ).values()
-      );
-
-      setClassDescriptions(uniqueClassDescriptions);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An unknown error occurred");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClassClick = (className: string) => {
-    router.push("/schedule");
-  };
-
-  useEffect(() => {
-    fetchEvents();
-  }, []);
-
-  return (
-    <Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-      <CardHeader className="pb-4">
-        <CardTitle className="text-lg font-bold text-white">Our Services</CardTitle>
-      </CardHeader>
-      <CardContent className="p-6">
-        {isLoading ? (
-          <p className="text-gray-400 font-medium text-sm">Loading classes...</p>
-        ) : error ? (
-          <p className="text-red-400 font-medium text-sm">{error}</p>
-        ) : classDescriptions.length > 0 ? (
-          <ul className="space-y-4">
-            {classDescriptions.map((cls) => (
-              <li
-                key={cls.name}
-                className="text-gray-200 hover:text-blue-400 transition-colors cursor-pointer"
-                onClick={() => handleClassClick(cls.name)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => e.key === "Enter" && handleClassClick(cls.name)}
-              >
-                <span className="font-medium text-blue-300">{cls.name}</span>
-                <div className="text-sm text-white">{cls.desc}</div>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-gray-400 font-medium text-sm">No classes available.</p>
-        )}
-      </CardContent>
-    </Card>
-  );
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/other/card";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+
+interface ClassDescription {
+  name: string;
+  desc: string;
+}
+
+export default function ClassList() {
+  const [classDescriptions, setClassDescriptions] = useState<ClassDescription[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const numberToDayKey: { [key: number]: string } = {
+    1: "Monday",
+    2: "Tuesday",
+    3: "Wednesday",
+    4: "Thursday",
+    5: "Friday",
+    6: "Saturday",
+    7: "Sunday",
+  };
+
+  const roundToNearestFiveMinutes = (time: string): string => {
+    if (!time) return "";
+    const [hours, minutes] = time.split(":").map(Number);
+    const roundedMinutes = Math.round(minutes / 5) * 5;
+    const adjustedHours = hours + Math.floor(roundedMinutes / 60);
+    const finalMinutes = roundedMinutes % 60;
+    return `${String(adjustedHours).padStart(2, "0")}:${String(finalMinutes).padStart(2, "0")}`;
+  };
+
+  const fetchEvents = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const response = await fetch("/api/schedule", {
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || `Failed to fetch events: ${response.status}`);
+      }
+
+      const result = await response.json();
+      const fetchedClasses = (result.data || []).map((event: any) => ({
+        id: event.id,
+        documentId: event.documentId,
+        name: event.title || "Untitled",
+        startTime: roundToNearestFiveMinutes(event.startTime || "00:00"),
+        endTime: roundToNearestFiveMinutes(event.endTime || "00:00"),
+        daysOfWeek: event.daysOfWeek || [],
+        classDescription: event.classDescription || "",
+      }));
+
+      const updatedSchedule: WeeklySchedule = {
+        Monday: [],
+        Tuesday: [],
+        Wednesday: [],
+        Thursday: [],
+        Friday: [],
+        Saturday: [],
+        Sunday: [],
+      };
+      fetchedClasses.forEach((cls: ScheduleClass) => {
+        cls.daysOfWeek.forEach((dayNum: number) => {
+          const dayKey = numberToDayKey[dayNum];
+          if (dayKey && updatedSchedule[dayKey]) {
+            updatedSchedule[dayKey].push({
+              name: cls.name,
+              startTime: cls.startTime,
+              endTime: cls.endTime,
+              id: cls.id,
+              documentId: cls.documentId,
+              daysOfWeek: cls.daysOfWeek,
+              classDescription: cls.classDescription,
+            });
+          }
+        });
+      });
+
+      const uniqueClassDescriptions: ClassDescription[] = Array.from(
+        new Map(
+          Object.values(updatedSchedule)
+            .flat()
+            .filter((cls): cls is ScheduleClass & { classDescription: string } =>
+              typeof cls.classDescription === "string" && cls.classDescription.length > 0
+            )
+            .map((cls) => [cls.name, { name: cls.name, desc: cls.classDescription }])
+        ).values()
+      );
+
+      setClassDescriptions(uniqueClassDescriptions);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClassClick = (className: string) => {
+    router.push("/schedule");
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  return (
+    <Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-bold text-white">Our Services</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6">
+        {isLoading ? (
+          <p className="text-gray-400 font-medium text-sm">Loading classes...</p>
+        ) : error ? (
+          <p className="text-red-400 font-medium text-sm">{error}</p>
+        ) : classDescriptions.length > 0 ? (
+          <ul className="space-y-4">
+            {classDescriptions.map((cls) => (
+              <li
+                key={cls.name}
+                className="text-gray-200 hover:text-blue-400 transition-colors cursor-pointer"
+                onClick={() => handleClassClick(cls.name)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === "Enter" && handleClassClick(cls.name)}
+              >
+                <span className="font-medium text-blue-300">{cls.name}</span>
+                <div className="text-sm text-white">{cls.desc}</div>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-400 font-medium text-sm">No classes available.</p>
+        )}
+      </CardContent>
+    </Card>
+  );
 }