@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/dist/components/addOns/functional/BioEditor.jsx

@@ -0,0 +1,187 @@
+"use client";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState, useEffect } from "react";
+import { EditIconButton, ToggleButton, UpdateButton, CancelButton, CloseButton } from "@/components/other/button";
+import { X } from "lucide-react";
+export function BioSection(_a) {
+    var user = _a.user, authLoading = _a.authLoading, bioImageUrl = _a.bioImageUrl, bioText = _a.bioText, bioTitle = _a.bioTitle, error = _a.error, isLoading = _a.isLoading, setBioImageUrl = _a.setBioImageUrl, setBioText = _a.setBioText, setBioTitle = _a.setBioTitle, setError = _a.setError, handlePatchSubmit = _a.handlePatchSubmit;
+    var _b = useState(false), isMobile = _b[0], setIsMobile = _b[1];
+    var _c = useState(false), isEditModalOpen = _c[0], setIsEditModalOpen = _c[1];
+    var _d = useState(bioTitle || ""), formTitle = _d[0], setFormTitle = _d[1];
+    var _e = useState(bioText || ""), formDescription = _e[0], setFormDescription = _e[1];
+    var _f = useState(null), formImage = _f[0], setFormImage = _f[1];
+    var _g = useState(false), isSubmitting = _g[0], setIsSubmitting = _g[1];
+    var _h = useState(false), isExpanded = _h[0], setIsExpanded = _h[1];
+    useEffect(function () {
+        var debounce = function (fn, delay) {
+            var timeout;
+            return function () {
+                clearTimeout(timeout);
+                timeout = setTimeout(fn, delay);
+            };
+        };
+        var checkMobile = debounce(function () {
+            setIsMobile(window.innerWidth < 768);
+        }, 100);
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return function () { return window.removeEventListener("resize", checkMobile); };
+    }, []);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: isEditModalOpen },
+        });
+        window.dispatchEvent(event);
+    }, [isEditModalOpen]);
+    useEffect(function () {
+        if (isEditModalOpen) {
+            // Store current scroll position
+            var scrollY_1 = window.scrollY;
+            // Prevent background scrolling
+            document.body.style.position = "fixed";
+            document.body.style.top = "-".concat(scrollY_1, "px");
+            document.body.style.width = "100%";
+            document.body.classList.add("overflow-hidden");
+            return function () {
+                // Restore scroll position and remove styles
+                var scrollYRestored = parseInt(document.body.style.top || "0", 10) * -1;
+                document.body.style.position = "";
+                document.body.style.top = "";
+                document.body.style.width = "";
+                document.body.classList.remove("overflow-hidden");
+                window.scrollTo(0, scrollYRestored);
+            };
+        }
+    }, [isEditModalOpen]);
+    var openEditModal = function () {
+        setFormTitle(bioTitle || "");
+        setFormDescription(bioText || "");
+        setFormImage(null);
+        setIsEditModalOpen(true);
+    };
+    var handleCancelEdit = function () {
+        setIsEditModalOpen(false);
+        setFormTitle(bioTitle || "");
+        setFormDescription(bioText || "");
+        setFormImage(null);
+    };
+    useEffect(function () {
+        var handleEsc = function (e) {
+            if (e.key === "Escape" && isEditModalOpen) {
+                handleCancelEdit();
+            }
+        };
+        window.addEventListener("keydown", handleEsc);
+        return function () { return window.removeEventListener("keydown", handleEsc); };
+    }, [isEditModalOpen]);
+    var isAdmin = !!(user === null || user === void 0 ? void 0 : user.businessAdminId);
+    var sectionVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var itemVariants = {
+        hidden: { opacity: 0, y: 10 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var modalVariants = {
+        hidden: { opacity: 0, y: "100vh" },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+        exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+    };
+    var paragraphs = bioText
+        ? bioText.split("\n").filter(function (paragraph) { return paragraph.trim() !== ""; })
+        : [];
+    return (<div className="w-full">
+      <style jsx>{"\n        :root {\n          --jubilee: #F47C7C;\n          --exuberant-blue: #FF69B4;\n          --modern-purple: #D946EF;\n          --green-primary: #1a3c34;\n        }\n\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n        }\n\n        .modal-form {\n          max-height: 90vh;\n          overflow-y: auto;\n          -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */\n        }\n\n        .modal-form input,\n        .modal-form textarea {\n          font-size: 0.875rem;\n          padding: 0.5rem;\n          border-radius: 0.375rem;\n          background: #374151;\n          color: #f3f4f6;\n          border: 1px solid #4b5563;\n        }\n\n        .modal-form input:focus,\n        .modal-form textarea:focus {\n          outline: none;\n          ring: 2px solid #3b82f6;\n        }\n\n        .modal-form label {\n          font-size: 0.875rem;\n          color: #d1d5db;\n        }\n\n        body.overflow-hidden {\n          overflow: hidden;\n        }\n\n        @supports not (backdrop-filter: blur(10px)) {\n          .glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n\n        @media (max-width: 768px) {\n          .glassmorphism {\n            backdrop-filter: none;\n            background: rgba(255, 255, 255, 0.2);\n          }\n\n          .modal-form input,\n          .modal-form textarea {\n            font-size: 0.875rem;\n            padding: 0.5rem;\n            border-radius: 0.375rem;\n          }\n\n          .modal-form label {\n            font-size: 0.875rem;\n          }\n\n          .modal-form .flex {\n            flex-direction: column;\n            gap: 0.5rem;\n          }\n\n          .modal-form textarea {\n            min-height: 80px;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .modal-form input,\n          .modal-form textarea {\n            font-size: 0.75rem;\n            padding: 0.5rem;\n          }\n\n          .modal-form label {\n            font-size: 0.75rem;\n          }\n        }\n      "}</style>
+      <motion.div variants={sectionVariants} initial="hidden" animate="visible" className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10">
+        <div className="flex flex-col md:flex-row gap-10 items-start min-h-[fit-content]">
+          <motion.div variants={itemVariants} className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0">
+            {bioImageUrl ? (<div className="relative w-full h-full">
+                <Image src={bioImageUrl} alt="Portrait of Kathy Caiello" fill className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" loading="lazy" quality={85}/>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
+                {isAdmin && (<div className="absolute top-2 right-0 flex">
+                    <EditIconButton onClick={function (e) {
+                    e.stopPropagation();
+                    openEditModal();
+                }}/>
+                  </div>)}
+              </div>) : (<div className="w-full h-full flex items-center justify-center">
+                <p className="text-gray-600 text-lg">No image available</p>
+              </div>)}
+          </motion.div>
+          <motion.div variants={itemVariants} className="space-y-6 min-h-[fit-content] h-auto w-full relative">
+            {bioTitle && (<motion.h2 variants={itemVariants} className="text-2xl sm:text-3xl font-bold text-gray-800">
+                {bioTitle}
+              </motion.h2>)}
+            {paragraphs.length > 0 ? (<>
+                {paragraphs
+                .slice(0, isExpanded ? paragraphs.length : 3)
+                .map(function (paragraph, index) { return (<motion.p key={index} variants={itemVariants} className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium">
+                      {paragraph}
+                    </motion.p>); })}
+                {paragraphs.length > 3 && (<motion.div variants={itemVariants} className="mt-4">
+                    <ToggleButton variant="toggle-bio" onClick={function () { return setIsExpanded(!isExpanded); }}>
+                      {isExpanded ? "Read Less" : "Read More"}
+                    </ToggleButton>
+                  </motion.div>)}
+              </>) : (<motion.p variants={itemVariants} className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium">
+                No bio description available.
+              </motion.p>)}
+          </motion.div>
+        </div>
+        {error && (<p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>)}
+      </motion.div>
+      {isEditModalOpen && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCancelEdit} aria-modal="true" role="dialog">
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto modal-form" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={handleCancelEdit}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Edit Bio</h3>
+            <form onSubmit={function (e) {
+                setIsSubmitting(true);
+                handlePatchSubmit(e, formTitle, formDescription, formImage, function () {
+                    setIsEditModalOpen(false);
+                }).finally(function () { return setIsSubmitting(false); });
+            }} className="space-y-4 modal-form">
+              <div>
+                <label htmlFor="bioTitle" className="block text-sm font-medium text-gray-300 mb-1">
+                  Bio Title
+                </label>
+                <input id="bioTitle" type="text" value={formTitle} onChange={function (e) { return setFormTitle(e.target.value); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" placeholder="Enter the bio title"/>
+              </div>
+              <div>
+                <label htmlFor="bioImage" className="block text-sm font-medium text-gray-300 mb-1">
+                  Update Image (optional)
+                </label>
+                <input id="bioImage" type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) { var _a; return setFormImage(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"/>
+                {formImage && (<p className="mt-2 text-gray-300 text-sm">Selected: {formImage.name}</p>)}
+              </div>
+              <div>
+                <label htmlFor="bioDescription" className="block text-sm font-medium text-gray-300 mb-1">
+                  Update Description
+                </label>
+                <textarea id="bioDescription" value={formDescription} onChange={function (e) { return setFormDescription(e.target.value); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]" placeholder="Enter the bio description"/>
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <UpdateButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Saving..." : "Update"}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  Cancel
+                </CancelButton>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>)}
+    </div>);
+}

package/dist/components/addOns/functional/CalendlyWidget.jsx

@@ -0,0 +1,61 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+var CalendlyWidget = function (_a) {
+    var _b = _a.calendlyUrl, calendlyUrl = _b === void 0 ? process.env.CALENDLY_URL || '' : _b, _c = _a.title, title = _c === void 0 ? 'Book Your Free Consultation' : _c, _d = _a.subtitle, subtitle = _d === void 0 ? 'Powered by Calendly • Takes just a moment to book!' : _d, _e = _a.mobileHeight, mobileHeight = _e === void 0 ? '800px' : _e, _f = _a.desktopHeight, desktopHeight = _f === void 0 ? '950px' : _f;
+    var _g = useState(false), isMobile = _g[0], setIsMobile = _g[1];
+    var _h = useState(false), calendlyLoaded = _h[0], setCalendlyLoaded = _h[1];
+    useEffect(function () {
+        var handleResize = function () {
+            setIsMobile(window.innerWidth < 768);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        var script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = 'https://assets.calendly.com/assets/external/widget.js';
+        script.async = true;
+        script.onload = function () { return setCalendlyLoaded(true); };
+        script.onerror = function () { return console.warn('Calendly script failed to load'); };
+        document.body.appendChild(script);
+        return function () {
+            if (document.body.contains(script)) {
+                document.body.removeChild(script);
+            }
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    useEffect(function () {
+        if (!process.env.CALENDLY_URL) {
+            console.warn('CALENDLY_URL is not set in environment variables. Using fallback URL.');
+        }
+    }, []);
+    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(function (word, index) { return (word.toLowerCase() === 'free' ? (<span key={index} className="text-indigo-400">{word} </span>) : ("".concat(word, " "))); })}
+          </h2>
+          <div className="bg-white/10 backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden border border-white/20">
+            <div className="calendly-inline-widget" data-url={calendlyUrl} style={{
+            minWidth: '320px',
+            height: isMobile ? mobileHeight : desktopHeight,
+        }}/>
+          </div>
+          <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>)}
+        </motion.div>
+      </section>
+    </main>);
+};
+export default CalendlyWidget;

package/dist/components/addOns/functional/ClassList.jsx

@@ -0,0 +1,158 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/other/card";
+export default function ClassList() {
+    var _this = this;
+    var _a = useState([]), classDescriptions = _a[0], setClassDescriptions = _a[1];
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(null), error = _c[0], setError = _c[1];
+    var router = useRouter();
+    var numberToDayKey = {
+        1: "Monday",
+        2: "Tuesday",
+        3: "Wednesday",
+        4: "Thursday",
+        5: "Friday",
+        6: "Saturday",
+        7: "Sunday",
+    };
+    var roundToNearestFiveMinutes = function (time) {
+        if (!time)
+            return "";
+        var _a = time.split(":").map(Number), hours = _a[0], minutes = _a[1];
+        var roundedMinutes = Math.round(minutes / 5) * 5;
+        var adjustedHours = hours + Math.floor(roundedMinutes / 60);
+        var finalMinutes = roundedMinutes % 60;
+        return "".concat(String(adjustedHours).padStart(2, "0"), ":").concat(String(finalMinutes).padStart(2, "0"));
+    };
+    var fetchEvents = function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, errorData, result, fetchedClasses, updatedSchedule_1, uniqueClassDescriptions, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, 6, 7]);
+                    setIsLoading(true);
+                    setError(null);
+                    return [4 /*yield*/, fetch("/api/schedule", {
+                            headers: { "Content-Type": "application/json" },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || "Failed to fetch events: ".concat(response.status));
+                case 3: return [4 /*yield*/, response.json()];
+                case 4:
+                    result = _a.sent();
+                    fetchedClasses = (result.data || []).map(function (event) { return ({
+                        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 || "",
+                    }); });
+                    updatedSchedule_1 = {
+                        Monday: [],
+                        Tuesday: [],
+                        Wednesday: [],
+                        Thursday: [],
+                        Friday: [],
+                        Saturday: [],
+                        Sunday: [],
+                    };
+                    fetchedClasses.forEach(function (cls) {
+                        cls.daysOfWeek.forEach(function (dayNum) {
+                            var dayKey = numberToDayKey[dayNum];
+                            if (dayKey && updatedSchedule_1[dayKey]) {
+                                updatedSchedule_1[dayKey].push({
+                                    name: cls.name,
+                                    startTime: cls.startTime,
+                                    endTime: cls.endTime,
+                                    id: cls.id,
+                                    documentId: cls.documentId,
+                                    daysOfWeek: cls.daysOfWeek,
+                                    classDescription: cls.classDescription,
+                                });
+                            }
+                        });
+                    });
+                    uniqueClassDescriptions = Array.from(new Map(Object.values(updatedSchedule_1)
+                        .flat()
+                        .filter(function (cls) {
+                        return typeof cls.classDescription === "string" && cls.classDescription.length > 0;
+                    })
+                        .map(function (cls) { return [cls.name, { name: cls.name, desc: cls.classDescription }]; })).values());
+                    setClassDescriptions(uniqueClassDescriptions);
+                    return [3 /*break*/, 7];
+                case 5:
+                    err_1 = _a.sent();
+                    setError(err_1 instanceof Error ? err_1.message : "An unknown error occurred");
+                    return [3 /*break*/, 7];
+                case 6:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClassClick = function (className) {
+        router.push("/schedule");
+    };
+    useEffect(function () {
+        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(function (cls) { return (<li key={cls.name} className="text-gray-200 hover:text-blue-400 transition-colors cursor-pointer" onClick={function () { return handleClassClick(cls.name); }} role="button" tabIndex={0} onKeyDown={function (e) { return 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>);
+}