@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/dist/components/addOns/functional/blogSections/BlogFormPopUp.jsx

@@ -1,465 +0,0 @@
-'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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, { useEffect, useRef, useCallback, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { CloseButton, ToggleButton, UpdateButton, CancelButton, ChatToggleButton, ChatSubmitButton, DeleteButton } from '@/components/other/button'; // Updated import
-import { Input } from '@/components/other/input';
-import { Label } from '@/components/other/label';
-import { X, ChevronLeft, ChevronRight } from 'lucide-react';
-import { useAuth, useUser } from '@clerk/nextjs';
-import { useStrapiAuth } from '@/lib/auth-context';
-import { useChat } from 'ai/react';
-var BlogFormPopUp = function (_a) {
-    var isModalOpen = _a.isModalOpen, setIsModalOpen = _a.setIsModalOpen, isConfirmDeleteOpen = _a.isConfirmDeleteOpen, setIsConfirmDeleteOpen = _a.setIsConfirmDeleteOpen, postToDelete = _a.postToDelete, setPostToDelete = _a.setPostToDelete, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, formData = _a.formData, setFormData = _a.setFormData, setError = _a.setError, setShowSuccess = _a.setShowSuccess, fetchData = _a.fetchData;
-    var _b = useState(null), formError = _b[0], setFormError = _b[1];
-    var _c = useState(false), isChatbotOpen = _c[0], setIsChatbotOpen = _c[1];
-    var _d = useState(false), showKeywords = _d[0], setShowKeywords = _d[1];
-    var _e = useState(formData.title.length), titleCharCount = _e[0], setTitleCharCount = _e[1];
-    var _f = useState(formData.title.trim().split(/\s+/).filter(Boolean).length), titleWordCount = _f[0], setTitleWordCount = _f[1];
-    var _g = useState(formData.description.length), descriptionCharCount = _g[0], setDescriptionCharCount = _g[1];
-    var _h = useState(formData.description.trim().split(/\s+/).filter(Boolean).length), descriptionWordCount = _h[0], setDescriptionWordCount = _h[1];
-    var modalRef = useRef(null);
-    var descriptionRef = useRef(null);
-    var _j = useStrapiAuth(), user = _j.user, authLoading = _j.authLoading;
-    var _k = useAuth(), getToken = _k.getToken, isSignedIn = _k.isSignedIn;
-    var clerkUser = useUser().user;
-    var _l = useState(0), scrollPosition = _l[0], setScrollPosition = _l[1];
-    var seoKeywords = [
-        'fitness training',
-        'gym workout plans',
-        'strength exercises',
-        'cardio routines',
-        'weight loss tips',
-        'muscle building',
-        'home workouts',
-        'personal trainer',
-        'fitness motivation',
-        'healthy lifestyle',
-        'gym equipment',
-        'bodybuilding tips',
-        'HIIT workouts',
-        'nutrition for fitness',
-        'exercise routines',
-    ];
-    var _m = useChat({
-        api: '/api/chat',
-        initialMessages: [
-            {
-                id: 'system-prompt',
-                role: 'system',
-                content: "You are an AI assistant helping with blog writing and SEO optimization. You are aware of the current blog post's title: \"".concat(formData.title, "\", description: \"").concat(formData.description, "\", and the following SEO keywords: ").concat(seoKeywords.join(', '), ". Provide suggestions to improve the blog post's SEO, such as keyword usage, content structure, or meta descriptions. Respond concisely and relevantly to user queries."),
-            },
-        ],
-    }), messages = _m.messages, input = _m.input, handleInputChange = _m.handleInputChange, handleChatSubmit = _m.handleSubmit, isChatLoading = _m.isLoading, error = _m.error;
-    useEffect(function () {
-    }, [user, clerkUser]);
-    var handleClose = useCallback(function () {
-        setIsModalOpen(false);
-        setFormData({
-            id: 0,
-            documentId: '',
-            title: '',
-            description: '',
-            author: (user === null || user === void 0 ? void 0 : user.businessTitle) || (clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.username) || (user === null || user === void 0 ? void 0 : user.username) || 'Anonymous',
-            publishedAt: '',
-        });
-        setFormError(null);
-        setIsChatbotOpen(false);
-        setShowKeywords(false);
-        setTitleCharCount(0);
-        setTitleWordCount(0);
-        setDescriptionCharCount(0);
-        setDescriptionWordCount(0);
-        window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
-    }, [setIsModalOpen, setFormData, user, clerkUser, scrollPosition]);
-    var handleKeywordClick = useCallback(function (keyword) {
-        var textarea = descriptionRef.current;
-        if (!textarea) {
-            setFormError('Text area not initialized');
-            return;
-        }
-        var start = textarea.selectionStart;
-        var end = textarea.selectionEnd;
-        var text = formData.description;
-        var newText = text.substring(0, start) + "".concat(keyword, " ") + text.substring(end);
-        var truncatedText = newText.slice(0, 1500);
-        setFormData(__assign(__assign({}, formData), { description: truncatedText }));
-        setDescriptionCharCount(truncatedText.length);
-        setDescriptionWordCount(truncatedText.trim().split(/\s+/).filter(Boolean).length);
-        setTimeout(function () {
-            textarea.focus();
-            textarea.selectionStart = textarea.selectionEnd = start + keyword.length + 1;
-        }, 0);
-    }, [formData, setFormData]);
-    var handleConfirmDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var token, response, errorData, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!postToDelete)
-                        return [2 /*return*/];
-                    setIsLoading(true);
-                    setError(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 7, 8, 9]);
-                    return [4 /*yield*/, getToken()];
-                case 2:
-                    token = _a.sent();
-                    return [4 /*yield*/, fetch('/api/blog', {
-                            method: 'DELETE',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                Authorization: "Bearer ".concat(token),
-                            },
-                            body: JSON.stringify({ documentId: postToDelete.documentId }),
-                        })];
-                case 3:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 5];
-                    return [4 /*yield*/, response.json()];
-                case 4:
-                    errorData = _a.sent();
-                    throw new Error(errorData.error || 'Failed to delete blog post');
-                case 5: return [4 /*yield*/, fetchData()];
-                case 6:
-                    _a.sent();
-                    setIsConfirmDeleteOpen(false);
-                    setPostToDelete(null);
-                    return [3 /*break*/, 9];
-                case 7:
-                    err_1 = _a.sent();
-                    setError(err_1 instanceof Error ? err_1.message : 'An unknown error occurred');
-                    return [3 /*break*/, 9];
-                case 8:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleCancelDelete = function () {
-        setIsConfirmDeleteOpen(false);
-        setPostToDelete(null);
-        window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
-    };
-    useEffect(function () {
-        if (isModalOpen) {
-            if (authLoading) {
-                setFormError('Authentication is still loading, please wait...');
-            }
-            else if (!isSignedIn || !user || !(clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id)) {
-                setFormError('You must be signed in to create or edit a blog post');
-                setFormData(__assign(__assign({}, formData), { author: 'Anonymous' }));
-            }
-            else if (user === null || user === void 0 ? void 0 : user.businessTitle) {
-                setFormData(__assign(__assign({}, formData), { author: user.businessTitle }));
-                setFormError(null);
-            }
-            else {
-                setFormData(__assign(__assign({}, formData), { author: (clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.username) || (user === null || user === void 0 ? void 0 : user.username) || 'Anonymous' }));
-                setFormError('Business title not found; using username or default author name');
-            }
-            setTitleCharCount(formData.title.length);
-            setTitleWordCount(formData.title.trim().split(/\s+/).filter(Boolean).length);
-            setDescriptionCharCount(formData.description.length);
-            setDescriptionWordCount(formData.description.trim().split(/\s+/).filter(Boolean).length);
-        }
-    }, [isModalOpen, user, isSignedIn, clerkUser, authLoading, setFormData, formData.title, formData.description]);
-    useEffect(function () {
-        if (isModalOpen && modalRef.current) {
-            setScrollPosition(window.scrollY);
-            var modal_1 = modalRef.current;
-            var focusableElements_1 = modal_1.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            var firstElement_1 = focusableElements_1[0];
-            if (firstElement_1) {
-                firstElement_1.focus({ preventScroll: true });
-            }
-            var handleKeyDown_1 = function (e) {
-                if (e.key === 'Tab') {
-                    var lastElement = focusableElements_1[focusableElements_1.length - 1];
-                    if (document.activeElement === lastElement && !e.shiftKey) {
-                        e.preventDefault();
-                        firstElement_1.focus({ preventScroll: true });
-                    }
-                    if (document.activeElement === firstElement_1 && e.shiftKey) {
-                        e.preventDefault();
-                        lastElement.focus({ preventScroll: true });
-                    }
-                }
-                if (e.key === 'Escape') {
-                    handleClose();
-                }
-            };
-            modal_1.addEventListener('keydown', handleKeyDown_1);
-            return function () { return modal_1.removeEventListener('keydown', handleKeyDown_1); };
-        }
-    }, [isModalOpen, handleClose]);
-    useEffect(function () {
-        if (isModalOpen || isConfirmDeleteOpen) {
-            var scrollY_1 = window.scrollY;
-            document.body.style.position = 'fixed';
-            document.body.style.top = "-".concat(scrollY_1, "px");
-            document.body.style.width = '100%';
-            document.body.classList.add('overflow-hidden');
-            setScrollPosition(scrollY_1);
-        }
-        else {
-            var scrollY_2 = scrollPosition;
-            document.body.style.position = '';
-            document.body.style.top = '';
-            document.body.style.width = '';
-            document.body.classList.remove('overflow-hidden');
-            window.scrollTo({ top: scrollY_2, behavior: 'instant' });
-        }
-        return function () {
-            document.body.style.position = '';
-            document.body.style.top = '';
-            document.body.style.width = '';
-            document.body.classList.remove('overflow-hidden');
-        };
-    }, [isModalOpen, isConfirmDeleteOpen, scrollPosition]);
-    useEffect(function () {
-        var event = new CustomEvent('modalStateChange', {
-            detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
-        });
-        window.dispatchEvent(event);
-    }, [isModalOpen, isConfirmDeleteOpen]);
-    var handleTitleChange = function (e) {
-        var value = e.target.value.slice(0, 50);
-        setFormData(__assign(__assign({}, formData), { title: value }));
-        setTitleCharCount(value.length);
-        setTitleWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-    };
-    var handleDescriptionChange = function (e) {
-        var value = e.target.value.slice(0, 1500);
-        setFormData(__assign(__assign({}, formData), { description: value }));
-        setDescriptionCharCount(value.length);
-        setDescriptionWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-    };
-    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var token, response, errorData, err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (!isSignedIn || !user || !(clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id)) {
-                        setError('You must be signed in to submit a blog post');
-                        return [2 /*return*/];
-                    }
-                    if (!formData.title || !formData.description || !formData.author) {
-                        setFormError('Please fill in all required fields');
-                        return [2 /*return*/];
-                    }
-                    setIsLoading(true);
-                    setFormError(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 7, 8, 9]);
-                    return [4 /*yield*/, getToken()];
-                case 2:
-                    token = _a.sent();
-                    return [4 /*yield*/, fetch('/api/blog', {
-                            method: formData.id ? 'PUT' : 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                Authorization: "Bearer ".concat(token),
-                            },
-                            body: JSON.stringify({
-                                documentId: formData.documentId,
-                                data: {
-                                    title: formData.title,
-                                    description: formData.description,
-                                    author: formData.author,
-                                    publishedAt: formData.publishedAt || new Date().toISOString(),
-                                },
-                            }),
-                        })];
-                case 3:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 5];
-                    return [4 /*yield*/, response.json()];
-                case 4:
-                    errorData = _a.sent();
-                    throw new Error(errorData.error || 'Failed to submit blog post');
-                case 5: return [4 /*yield*/, fetchData()];
-                case 6:
-                    _a.sent();
-                    setShowSuccess(true);
-                    setTimeout(function () { return setShowSuccess(false); }, 3000);
-                    handleClose();
-                    return [3 /*break*/, 9];
-                case 7:
-                    err_2 = _a.sent();
-                    setFormError(err_2 instanceof Error ? err_2.message : 'An unknown error occurred');
-                    return [3 /*break*/, 9];
-                case 8:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
-            }
-        });
-    }); };
-    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' } },
-    };
-    return (<div>
-      {isModalOpen && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 flex items-center justify-center z-[10000] p-4" onClick={handleClose}>
-          <motion.div ref={modalRef} className="relative w-full max-w-5xl mx-4 bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 max-h-[90vh] overflow-y-auto overflow-x-hidden flex flex-col sm:flex-row gap-4" onClick={function (e) { return e.stopPropagation(); }} role="dialog" aria-modal="true" aria-labelledby="modal-title">
-            <div className="flex-1">
-              <div className="relative mb-6 pr-12">
-                <h3 id="modal-title" className="text-xl sm:text-2xl font-bold text-white">
-                  {formData.id ? 'Edit Blog Post' : 'Add New Blog Post'}
-                </h3>
-                <CloseButton variant="close-form" onClick={handleClose}>
-                  <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-                </CloseButton>
-              </div>
-              <form onSubmit={onSubmit} className="space-y-4">
-                <div>
-                  <Label htmlFor="title" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Title
-                  </Label>
-                  <Input id="title" type="text" placeholder="Enter post title" value={formData.title} onChange={handleTitleChange} maxLength={50} className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required/>
-                  <p className="text-sm text-gray-500 mt-1">
-                    {titleCharCount}/50 characters, {titleWordCount} words
-                  </p>
-                </div>
-                <div>
-                  <Label htmlFor="author" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Author
-                  </Label>
-                  <Input id="author" type="text" value={formData.author} onChange={function (e) { return setFormData(__assign(__assign({}, formData), { author: e.target.value })); }} className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required/>
-                </div>
-                <div>
-                  <Label htmlFor="description" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Description
-                  </Label>
-                  <textarea ref={descriptionRef} id="description" placeholder="Enter post description" value={formData.description} onChange={handleDescriptionChange} maxLength={1500} className="w-full bg-transparent text-white border border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[150px]" required/>
-                  <p className="text-sm text-gray-500 mt-1">
-                    {descriptionCharCount}/1500 characters, {descriptionWordCount} words
-                  </p>
-                </div>
-                <div>
-                  <ToggleButton variant="toggle-keywords" onClick={function () { return setShowKeywords(!showKeywords); }} aria-expanded={showKeywords} aria-controls="seo-keywords">
-                    {showKeywords ? 'Hide Keywords' : 'Show SEO Keywords'}
-                  </ToggleButton>
-                  {showKeywords && (<ul id="seo-keywords" className="mt-2 bg-gray-700 border border-gray-600 rounded-md p-4 max-h-40 overflow-y-auto text-white text-sm">
-                      {seoKeywords.map(function (keyword, index) { return (<li key={index} onClick={function () { return handleKeywordClick(keyword); }} onKeyDown={function (e) {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            handleKeywordClick(keyword);
-                        }
-                    }} tabIndex={0} role="button" aria-label={"Insert keyword: ".concat(keyword)} className="cursor-pointer py-1 px-2 hover:bg-blue-500 hover:text-white rounded transition-colors break-words">
-                          {keyword}
-                        </li>); })}
-                    </ul>)}
-                </div>
-                <div className="flex flex-col sm:flex-row gap-3 justify-end">
-                  <UpdateButton type="submit" disabled={isLoading || !isSignedIn || !user || !(clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id) || authLoading}>
-                    {isLoading ? 'Saving...' : formData.id ? 'Update' : 'Submit'}
-                  </UpdateButton>
-                  <CancelButton type="button" onClick={handleClose}>
-                    Cancel
-                  </CancelButton>
-                </div>
-                {formError && <p className="text-red-500 text-sm font-semibold break-words">{formError}</p>}
-              </form>
-            </div>
-            <ChatToggleButton onClick={function () { return setIsChatbotOpen(!isChatbotOpen); }} aria-label={isChatbotOpen ? 'Close AI chatbot' : 'Open AI chatbot'}>
-              {isChatbotOpen ? (<ChevronLeft className="h-5 w-5 text-white"/>) : (<ChevronRight className="h-5 w-5 text-white"/>)}
-            </ChatToggleButton>
-            <AnimatePresence>
-              {isChatbotOpen && (<motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.3, ease: 'easeInOut' }} className="hidden sm:flex flex-col w-72 bg-gray-700 border-l border-gray-600 p-4 max-h-[90vh] overflow-y-auto">
-                  <h4 className="text-lg font-bold text-white mb-3">AI Chatbot is coming soon!</h4>
-                  {error && <p className="text-red-500 text-sm bg-gray-800 p-2 rounded-md break-words">Error: {error.message}</p>}
-                  <div className="flex-1 overflow-y-auto bg-gray-800 p-3 rounded-md border border-gray-600 break-words">
-                    {messages
-                    .filter(function (msg) { return msg.role !== 'system'; })
-                    .map(function (msg, index) { return (<p key={index} className={"text-sm p-2 rounded-md mb-2 ".concat(msg.role === 'user' ? 'bg-blue-500 text-white text-right' : 'bg-gray-700 text-white text-left')}>
-                          {msg.content}
-                        </p>); })}
-                  </div>
-                  <form onSubmit={handleChatSubmit} className="flex gap-2 mt-3">
-                    <Input value={input} onChange={handleInputChange} placeholder="Ask for suggestions..." disabled={isChatLoading} className="flex-1 bg-gray-800 text-white border-gray-600 rounded-md p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/>
-                    <ChatSubmitButton type="submit" disabled={isChatLoading}>
-                      {isChatLoading ? '⟳' : '➤'}
-                    </ChatSubmitButton>
-                  </form>
-                </motion.div>)}
-            </AnimatePresence>
-          </motion.div>
-        </motion.div>)}
-
-      {isConfirmDeleteOpen && postToDelete && (<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" onClick={handleCancelDelete} data-testid="confirm-modal-overlay">
-          <div className="relative w-full max-w-md mx-auto bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 h-fit max-h-[90vh] overflow-y-auto" onClick={function (e) { return e.stopPropagation(); }}>
-            <CloseButton onClick={handleCancelDelete}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-            </CloseButton>
-            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
-              Confirm Deletion
-            </h3>
-            <p className="text-white text-sm mb-4">
-              Are you sure you want to delete the post &quot;{postToDelete.title}&quot;? This action cannot be undone.
-            </p>
-            <div className="flex flex-col sm:flex-row gap-3 justify-end">
-              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
-                {isLoading ? 'Deleting...' : 'Delete'}
-              </DeleteButton>
-              <CancelButton onClick={handleCancelDelete}>
-                Cancel
-              </CancelButton>
-            </div>
-          </div>
-        </motion.div>)}
-    </div>);
-};
-export default BlogFormPopUp;

package/dist/components/addOns/functional/blogSections/BlogList.jsx

@@ -1,170 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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, useRef } from "react";
-import { useRouter } from "next/navigation";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
-import { Calendar } from "lucide-react";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { BLOG_LIST } from "./constants/blogList";
-export default function BlogList() {
-    var _this = this;
-    var router = useRouter();
-    var _a = useState([]), posts = _a[0], setPosts = _a[1];
-    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(null), error = _c[0], setError = _c[1];
-    var _d = useState(false), isMobile = _d[0], setIsMobile = _d[1];
-    var hasFetched = useRef(false);
-    useEffect(function () {
-        var handleResize = function () {
-            setIsMobile(window.innerWidth < 640);
-        };
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, []);
-    useEffect(function () {
-        if (hasFetched.current)
-            return;
-        hasFetched.current = true;
-        var fetchPosts = function () { return __awaiter(_this, void 0, void 0, function () {
-            var response, errorData, data, blogPosts, err_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setIsLoading(true);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 6, 7, 8]);
-                        return [4 /*yield*/, fetch("/api/blog", {
-                                headers: { "Content-Type": "application/json" },
-                                cache: "no-store",
-                            })];
-                    case 2:
-                        response = _a.sent();
-                        if (!!response.ok) return [3 /*break*/, 4];
-                        return [4 /*yield*/, response.json()];
-                    case 3:
-                        errorData = _a.sent();
-                        throw new Error(errorData.error || BLOG_LIST.ERRORS.FETCH_FAILED);
-                    case 4: return [4 /*yield*/, response.json()];
-                    case 5:
-                        data = (_a.sent()).data;
-                        blogPosts = data.blogPosts.map(function (p) { return (__assign(__assign({}, p), { publishedAt: new Date(p.publishedAt).toISOString() })); });
-                        setPosts(blogPosts);
-                        return [3 /*break*/, 8];
-                    case 6:
-                        err_1 = _a.sent();
-                        setError(err_1 instanceof Error ? err_1.message : BLOG_LIST.ERRORS.UNKNOWN_ERROR);
-                        return [3 /*break*/, 8];
-                    case 7:
-                        setIsLoading(false);
-                        return [7 /*endfinally*/];
-                    case 8: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchPosts();
-    }, []);
-    var truncateText = function (text, field) {
-        var maxLength = isMobile ? (field === "authorDate" ? 30 : 20) : 50;
-        if (text.length <= maxLength)
-            return text;
-        return text.slice(0, maxLength - 3) + "...";
-    };
-    if (isLoading) {
-        return (<div className="py-8 text-center">
-        <Spinner />
-      </div>);
-    }
-    return (<div className="w-full bg-[#1E2A44] border-none outline-none z-0 px-0 py-8 sm:px-6 sm:py-16 md:p-8">
-      <style jsx>{"\n        .file-item {\n          z-index: 30;\n          pointer-events: auto;\n          cursor: pointer;\n        }\n      "}</style>
-      <section className="relative z-10">
-        <div className="w-full max-w-7xl mx-auto">
-          <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 text-white flex flex-col items-center space-y-6 bg-[#1E2A44] border-none rounded-none">
-            <CardHeader className="pb-4 text-center">
-              <CardTitle className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white">
-                {BLOG_LIST.UI.CARD_TITLE}
-              </CardTitle>
-              <p className="text-gray-300 text-base sm:text-lg md:text-xl">
-                {BLOG_LIST.UI.CARD_DESCRIPTION}
-              </p>
-            </CardHeader>
-            <CardContent className="w-full space-y-4">
-              {error && (<p className="text-red-400 text-base sm:text-lg md:text-xl text-center">
-                  {error}
-                </p>)}
-              {posts.length > 0 ? (<div className="space-y-4 max-h-[400px] overflow-y-auto">
-                  {posts.map(function (post) { return (<div key={post.id} className="file-item w-full flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 sm:p-4 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer" onClick={function () { return router.push("/blog/".concat(post.id)); }} role="link" aria-label={"View post: ".concat(post.title)}>
-                      <div className="flex flex-col w-full">
-                        <h4 className="font-bold text-base sm:text-lg md:text-xl text-white mb-1 truncate">
-                          {truncateText(post.title, "title")}
-                        </h4>
-                        <div className="flex items-center gap-2 text-sm text-gray-300">
-                          <Calendar className="h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0"/>
-                          <span>
-                            {truncateText("By ".concat(post.author, " | ").concat(new Date(post.publishedAt).toLocaleDateString("en-US", {
-                    year: "numeric",
-                    month: "short",
-                    day: "numeric",
-                })), "authorDate")}
-                          </span>
-                        </div>
-                      </div>
-                      {/* <p className="text-sm text-gray-300 mt-2 sm:mt-0 sm:ml-4 w-full sm:w-auto flex-1 truncate">
-                  {truncateText(post.description, "description")}
-                </p> */}
-                    </div>); })}
-                </div>) : (<p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
-                  {BLOG_LIST.UI.NO_POSTS_MESSAGE}
-                </p>)}
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-    </div>);
-}