@devvistatech/devvista-kit 0.0.1

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

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

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