@devvistatech/devvista-kit 0.0.10 → 0.0.13

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

@@ -1,187 +0,0 @@
-"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

@@ -1,61 +0,0 @@
-'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

@@ -1,158 +0,0 @@
-"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>);
-}