@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/functional/aboutSections/AboutSection.jsx

@@ -0,0 +1,369 @@
+"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 { motion } from "framer-motion";
+import Image from "next/image";
+import { useState, useEffect, useRef } from "react";
+import { EditIconButton, CloseButton, UpdateButton, CancelButton, ActionButton, ReadMoreButton } from "@/components/other/button";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { ArrowRight, X } from "lucide-react";
+import Link from "next/link";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { ABOUT_SECTION } from "./constants/aboutSection";
+export function AboutSection(_a) {
+    var _this = this;
+    var user = _a.user, authLoading = _a.authLoading;
+    var getToken = useAuth().getToken;
+    var isSignedIn = useUser().isSignedIn;
+    var _b = useState(false), isMobile = _b[0], setIsMobile = _b[1];
+    var _c = useState(false), isEditModalOpen = _c[0], setIsEditModalOpen = _c[1];
+    var _d = useState(""), formTitle = _d[0], setFormTitle = _d[1];
+    var _e = useState(""), 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];
+    var _j = useState(null), title = _j[0], setTitle = _j[1];
+    var _k = useState(null), description = _k[0], setDescription = _k[1];
+    var _l = useState(null), imageUrl = _l[0], setImageUrl = _l[1];
+    var _m = useState(null), error = _m[0], setError = _m[1];
+    var _o = useState(true), isLoading = _o[0], setIsLoading = _o[1];
+    var hasFetched = useRef(false);
+    useEffect(function () {
+        if (hasFetched.current)
+            return;
+        hasFetched.current = true;
+        var fetchAboutData = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response, result, aboutData, errorData, err_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setIsLoading(true);
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 7, 8, 9]);
+                        return [4 /*yield*/, fetch("/api/about?t=".concat(Date.now()), {
+                                headers: { "Content-Type": "application/json" },
+                                cache: "no-store",
+                            })];
+                    case 2:
+                        response = _b.sent();
+                        if (!response.ok) return [3 /*break*/, 4];
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        result = _b.sent();
+                        if (result.data) {
+                            aboutData = Array.isArray(result.data)
+                                ? result.data[0]
+                                : result.data;
+                            setTitle(aboutData.title || null);
+                            setDescription(aboutData.description || null);
+                            setImageUrl(((_a = aboutData.image) === null || _a === void 0 ? void 0 : _a.url) || null);
+                            setFormTitle(aboutData.title || "");
+                            setFormDescription(aboutData.description || "");
+                        }
+                        else {
+                            throw new Error(ABOUT_SECTION.ERRORS.NO_DATA_FOUND);
+                        }
+                        return [3 /*break*/, 6];
+                    case 4: return [4 /*yield*/, response.json()];
+                    case 5:
+                        errorData = _b.sent();
+                        throw new Error(errorData.error || ABOUT_SECTION.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+                    case 6: return [3 /*break*/, 9];
+                    case 7:
+                        err_1 = _b.sent();
+                        console.error("Fetch About Error:", err_1);
+                        setError(err_1 instanceof Error ? err_1.message : ABOUT_SECTION.ERRORS.FETCH_ERROR);
+                        return [3 /*break*/, 9];
+                    case 8:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 9: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchAboutData();
+    }, []);
+    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) {
+            document.body.classList.add("overflow-hidden");
+        }
+        else {
+            document.body.classList.remove("overflow-hidden");
+        }
+        return function () {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, [isEditModalOpen]);
+    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 openEditModal = function () {
+        setFormTitle(title || "");
+        setFormDescription(description || "");
+        setFormImage(null);
+        setIsEditModalOpen(true);
+    };
+    var handleCancelEdit = function () {
+        setIsEditModalOpen(false);
+        setFormTitle(title || "");
+        setFormDescription(description || "");
+        setFormImage(null);
+    };
+    var handlePatchSubmit = function (e, formTitle, formDescription, formImage, onSuccess) { return __awaiter(_this, void 0, void 0, function () {
+        var formData, token, response, errorData, result, aboutData, err_2;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isSignedIn || !(user === null || user === void 0 ? void 0 : user.businessAdminId)) {
+                        console.error("No user or businessAdminId:", {
+                            user: user,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(ABOUT_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
+                        return [2 /*return*/];
+                    }
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 7, , 8]);
+                    formData = new FormData();
+                    if (formTitle && formTitle !== title) {
+                        formData.append("title", formTitle);
+                    }
+                    if (formDescription && formDescription !== description) {
+                        formData.append("description", formDescription);
+                    }
+                    if (formImage) {
+                        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
+                            throw new Error(ABOUT_SECTION.ERRORS.INVALID_IMAGE_TYPE);
+                        }
+                        formData.append("image", formImage);
+                    }
+                    if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
+                        onSuccess();
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _b.sent();
+                    if (!token) {
+                        throw new Error(ABOUT_SECTION.ERRORS.NO_AUTH_TOKEN);
+                    }
+                    return [4 /*yield*/, fetch("/api/about", {
+                            method: "PUT",
+                            headers: {
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: formData,
+                        })];
+                case 3:
+                    response = _b.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _b.sent();
+                    throw new Error(errorData.error || ABOUT_SECTION.ERRORS.UPDATE_FAILED.replace("${response.status}", response.status.toString()));
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    result = _b.sent();
+                    if (result.data) {
+                        aboutData = Array.isArray(result.data)
+                            ? result.data[0]
+                            : result.data;
+                        setImageUrl(((_a = aboutData.image) === null || _a === void 0 ? void 0 : _a.url) || null);
+                        setDescription(aboutData.description || null);
+                        setTitle(aboutData.title || null);
+                        setFormTitle(aboutData.title || "");
+                        setFormDescription(aboutData.description || "");
+                        setError(null);
+                        onSuccess();
+                    }
+                    return [3 /*break*/, 8];
+                case 7:
+                    err_2 = _b.sent();
+                    console.error("Update Error:", err_2);
+                    setError(err_2 instanceof Error ? err_2.message : ABOUT_SECTION.ERRORS.UPDATE_ERROR);
+                    return [3 /*break*/, 8];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    var isAdmin = isSignedIn && !!(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 = description
+        ? description.split("\n").filter(function (paragraph) { return paragraph.trim() !== ""; })
+        : [];
+    return (<div className="w-full px-4 sm:px-8 flex-grow relative bg-overlay z-10">
+      <style jsx>{"\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #FFFFFF;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #FF69B4;\n        }\n\n        .about-container {\n          max-width: 1200px;\n          margin: 0 auto;\n          overflow-wrap: break-word;\n          word-break: break-word;\n        }\n        .about-container p {\n          margin-bottom: 1rem;\n          font-size: 1.25rem;\n          line-height: 1.6;\n          color: var(--natural-white);\n        }\n        @media (max-width: 640px) {\n          .about-container p {\n            font-size: 1.125rem;\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        .modal-form input:focus,\n        .modal-form textarea:focus {\n          outline: none;\n          ring: 2px solid #3b82f6;\n        }\n        .modal-form label {\n          font-size: 0.875rem;\n          color: #d1d5db;\n        }\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.1);\n          backdrop-filter: blur(12px);\n          -webkit-backdrop-filter: blur(12px);\n          border: 1px solid rgba(255, 255, 255, 0.2);\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\n          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n        }\n        .glassmorphism:hover {\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n        }\n        .bg-overlay {\n          position: relative;\n          background: #1E2A44;\n          background-size: cover;\n          background-position: center;\n          background-repeat: no-repeat;\n        }\n        .bg-overlay::before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background: rgba(30, 42, 68, 0.7);\n          z-index: 1;\n        }\n        .bg-overlay > * {\n          position: relative;\n          z-index: 2;\n        }\n        @supports not (backdrop-filter: blur(12px)) {\n          .glassmorphism {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n        @media (max-width: 640px) {\n          .modal-form input,\n          .modal-form textarea {\n            font-size: 0.875rem;\n            padding: 0.5rem;\n            border-radius: 0.375rem;\n          }\n          .modal-form label {\n            font-size: 0.875rem;\n          }\n          .modal-form .flex {\n            flex-direction: column;\n            gap: 0.5rem;\n          }\n          .modal-form textarea {\n            min-height: 80px;\n          }\n          .glassmorphism {\n            padding: 1rem;\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          .modal-form label {\n            font-size: 0.75rem;\n          }\n        }\n      "}</style>
+      <motion.section variants={sectionVariants} initial="hidden" animate="visible" className="about-container py-20 sm:py-32 mx-auto px-8 sm:px-10">
+        <motion.blockquote variants={itemVariants} className="text-4xl sm:text-6xl font-bold text-white text-center pb-20 sm:pb-32 tracking-tight">
+          {ABOUT_SECTION.UI.BLOCKQUOTE_TEXT}
+        </motion.blockquote>
+        <div className="space-y-6 glassmorphism p-10 sm:p-16 rounded-2xl">
+          {isAdmin && (<motion.div variants={itemVariants} className="flex justify-end">
+              <EditIconButton onClick={openEditModal} className="touch-action-manipulation">
+                {ABOUT_SECTION.BUTTONS.EDIT_BUTTON}
+              </EditIconButton>
+            </motion.div>)}
+          <div className="flex flex-col md:flex-row gap-12 items-start min-h-[fit-content]">
+            <motion.div variants={itemVariants} className="w-full md:w-1/2 max-w-[600px] h-auto mb-12 md:mb-0 relative">
+              {imageUrl ? (<Image src={imageUrl} alt="About DevVista Kit" width={600} height={720} sizes="(max-width: 768px) 100vw, 600px" className="rounded-2xl w-full h-auto object-cover object-center glassmorphism shadow-lg" priority quality={60}/>) : (<div className="w-full h-[720px] bg-gray-200 rounded-2xl flex items-center justify-center">
+                  <p className="text-gray-600">{ABOUT_SECTION.UI.NO_IMAGE_AVAILABLE}</p>
+                </div>)}
+            </motion.div>
+            <motion.div variants={itemVariants} className="about-container space-y-6 min-h-[fit-content] h-auto w-full relative">
+              {title && (<motion.h2 variants={itemVariants} className="text-4xl sm:text-5xl font-bold text-white tracking-tight">
+                  {title}
+                </motion.h2>)}
+              {description ? (<>
+                  {paragraphs.slice(0, isExpanded ? paragraphs.length : 2).map(function (paragraph, index) { return (<motion.p key={index} variants={itemVariants} className={"text-xl sm:text-2xl text-white font-bold ".concat(index > 0 ? "pt-4" : "")}>
+                      {paragraph}
+                    </motion.p>); })}
+                  {paragraphs.length > 2 && (<motion.div variants={itemVariants} className="mt-4">
+                      <ReadMoreButton size="readMore" className="text-[#FF69B4]" onClick={function () { return setIsExpanded(!isExpanded); }}>
+                        {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
+                      </ReadMoreButton>
+                    </motion.div>)}
+                  <motion.div variants={itemVariants}>
+                    <ActionButton asChild>
+                      <Link href="/contact" className="flex items-center justify-center">
+                        {ABOUT_SECTION.BUTTONS.GET_STARTED_BUTTON}
+                        <ArrowRight className="ml-2 h-5 w-5"/>
+                      </Link>
+                    </ActionButton>
+                  </motion.div>
+                </>) : (<motion.p variants={itemVariants} className="text-xl sm:text-2xl text-white font-bold">
+                  {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
+                </motion.p>)}
+              <div className="mt-4">
+                {authLoading || isLoading ? (<Spinner />) : isAdmin ? (<p className="text-gray-400 text-sm font-medium">
+                    {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
+                  </p>) : user ? (<p className="text-gray-400 text-sm font-medium"></p>) : (<p className="text-gray-400 text-sm font-medium"></p>)}
+              </div>
+            </motion.div>
+          </div>
+          {error && (<p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>)}
+        </div>
+      </motion.section>
+      {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" 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">{ABOUT_SECTION.UI.MODAL_HEADING}</h3>
+            <form onSubmit={function (e) {
+                setIsSubmitting(true);
+                handlePatchSubmit(e, formTitle, formDescription, formImage, function () {
+                    setIsEditModalOpen(false);
+                    setIsSubmitting(false);
+                });
+            }} className="space-y-4 modal-form">
+              <div>
+                <label htmlFor="aboutTitle" className="block text-sm font-medium text-gray-300 mb-1">
+                  {ABOUT_SECTION.UI.TITLE_LABEL}
+                </label>
+                <input id="aboutTitle" 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={ABOUT_SECTION.UI.TITLE_PLACEHOLDER}/>
+              </div>
+              <div>
+                <label htmlFor="aboutImage" className="block text-sm font-medium text-gray-300 mb-1">
+                  {ABOUT_SECTION.UI.IMAGE_LABEL}
+                </label>
+                <input id="aboutImage" 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">{ABOUT_SECTION.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", formImage.name)}</p>)}
+              </div>
+              <div>
+                <label htmlFor="aboutDescription" className="block text-sm font-medium text-gray-300 mb-1">
+                  {ABOUT_SECTION.UI.DESCRIPTION_LABEL}
+                </label>
+                <textarea id="aboutDescription" 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={ABOUT_SECTION.UI.DESCRIPTION_PLACEHOLDER}/>
+              </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 ? ABOUT_SECTION.BUTTONS.SAVING_BUTTON : ABOUT_SECTION.BUTTONS.UPDATE_BUTTON}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  {ABOUT_SECTION.BUTTONS.CANCEL_BUTTON}
+                </CancelButton>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>)}
+    </div>);
+}

package/dist/components/addOns/functional/aboutSections/constants/aboutSection.js

@@ -0,0 +1,65 @@
+// components/addOns/functional/aboutSections/constants/aboutSection.ts
+// Constants for hardcoded text in AboutSection.tsx, organized by purpose
+export var ABOUT_SECTION = {
+    // UI Text for AboutSection
+    UI: {
+        // Blockquote text
+        BLOCKQUOTE_TEXT: "“DevVista Kit is a modern, well-equipped facility with a friendly and vibrant atmosphere.”",
+        // Placeholder text when no image is available
+        NO_IMAGE_AVAILABLE: "No image available",
+        // Text when no description is available
+        NO_DESCRIPTION_AVAILABLE: "No about description available.",
+        // Message when logged in as admin
+        ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+        // Modal heading
+        MODAL_HEADING: "Edit About",
+        // Form label for title input
+        TITLE_LABEL: "About Title",
+        // Placeholder for title input
+        TITLE_PLACEHOLDER: "Enter the about title",
+        // Form label for image input
+        IMAGE_LABEL: "Update Image (optional)",
+        // Text showing selected image name
+        SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+        // Form label for description textarea
+        DESCRIPTION_LABEL: "Update Description",
+        // Placeholder for description textarea
+        DESCRIPTION_PLACEHOLDER: "Enter the about description",
+    },
+    // Button Text for AboutSection
+    BUTTONS: {
+        // EditButton text
+        EDIT_BUTTON: "Edit About",
+        // ReadMoreButton text when not expanded
+        READ_MORE_BUTTON: "Read More",
+        // ReadMoreButton text when expanded
+        READ_LESS_BUTTON: "Read Less",
+        // ActionButton text
+        GET_STARTED_BUTTON: "Get Started",
+        // UpdateButton text
+        UPDATE_BUTTON: "Update",
+        // UpdateButton text when submitting
+        SAVING_BUTTON: "Saving...",
+        // CancelButton text
+        CANCEL_BUTTON: "Cancel",
+    },
+    // Error Messages for AboutSection
+    ERRORS: {
+        // Error when no about data is returned
+        NO_DATA_FOUND: "About data not found",
+        // Error when fetch fails with status code
+        FETCH_FAILED: "Failed to fetch about data: ${response.status}",
+        // Generic error for fetch failure
+        FETCH_ERROR: "An error occurred while fetching about data",
+        // Error for non-admin update attempt
+        UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update about data",
+        // Error for invalid image type
+        INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+        // Error when no authentication token is available
+        NO_AUTH_TOKEN: "No authentication token available",
+        // Error when update fails with status code
+        UPDATE_FAILED: "Failed to update about data: ${response.status}",
+        // Generic error for update failure
+        UPDATE_ERROR: "Failed to update about data",
+    },
+};

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

@@ -0,0 +1,111 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { AddButton, EditIconButton, TrashIconButton } from "@/components/other/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/other/card";
+import { Heart, Send } from "lucide-react";
+import { Separator } from "@/components/other/separator";
+import { useAuth } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { BLOG_DASHBOARD } from "./constants/blogDashboard";
+var BlogDashboard = function (_a) {
+    var isModalOpen = _a.isModalOpen, setIsModalOpen = _a.setIsModalOpen, isConfirmDeleteOpen = _a.isConfirmDeleteOpen, setIsConfirmDeleteOpen = _a.setIsConfirmDeleteOpen, posts = _a.posts, setPosts = _a.setPosts, setError = _a.setError, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, fetchData = _a.fetchData, formData = _a.formData, setFormData = _a.setFormData, postToDelete = _a.postToDelete, setPostToDelete = _a.setPostToDelete, showSuccess = _a.showSuccess, setShowSuccess = _a.setShowSuccess;
+    var router = useRouter();
+    var user = useStrapiAuth().user;
+    var _b = useAuth(), getToken = _b.getToken, isSignedIn = _b.isSignedIn, isLoaded = _b.isLoaded;
+    var _c = useState(false), isAdmin = _c[0], setIsAdmin = _c[1];
+    useEffect(function () {
+        if (isLoaded) {
+            setIsAdmin(isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId));
+        }
+    }, [isLoaded, isSignedIn, user === null || user === void 0 ? void 0 : user.businessAdminId]);
+    var handleEdit = function (post) {
+        setFormData(post);
+        setIsModalOpen(true);
+    };
+    var openModal = function (post) {
+        if (post) {
+            setFormData(post);
+        }
+        else {
+            setFormData({
+                id: 0,
+                documentId: "",
+                title: "",
+                description: "",
+                author: (user === null || user === void 0 ? void 0 : user.firstName) && (user === null || user === void 0 ? void 0 : user.lastName) ? "".concat(user.firstName, " ").concat(user.lastName) : "",
+                publishedAt: "",
+            });
+        }
+        setIsModalOpen(true);
+    };
+    useEffect(function () {
+    }, [posts, isAdmin, isLoaded, isSignedIn, user]);
+    if (!isLoaded) {
+        return null;
+    }
+    return (<Card className="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-2xl font-bold text-blue-200">{BLOG_DASHBOARD.UI.CARD_TITLE}</CardTitle>
+        <CardDescription className="text-gray-400">{BLOG_DASHBOARD.UI.CARD_DESCRIPTION}</CardDescription>
+      </CardHeader>
+      <CardContent className="p-6 sm:p-8">
+        {showSuccess && (<div className="bg-green-900/50 border-l-4 border-green-600 p-4 rounded-lg backdrop-blur-sm mb-8 animate-pulse">
+            <div className="flex items-center gap-2">
+              <Heart className="h-5 w-5 text-green-400"/>
+              <p className="text-green-300">{BLOG_DASHBOARD.UI.SUCCESS_MESSAGE}</p>
+            </div>
+          </div>)}
+        <div className="mb-6">
+          <AddButton onClick={function () { return openModal(); }} disabled={isLoading || !isSignedIn}>
+            <Send className="w-5 h-5 mr-2"/>
+            {BLOG_DASHBOARD.BUTTONS.ADD_BUTTON}
+          </AddButton>
+        </div>
+        {posts.length > 0 ? (<div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
+            {posts.map(function (post, index) { return (<div key={post.id} className="group">
+                <div onClick={function () { return router.push("/blog/".concat(post.id)); }} className="cursor-pointer p-4 bg-gray-900/40 rounded-lg border border-gray-700/50 hover:bg-gray-700/30 transition-all relative" // Added relative
+            >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex flex-col max-w-[70%]">
+                      <h4 className="font-medium text-blue-200 mb-1 truncate">{post.title}</h4>
+                      <div className="text-sm text-gray-400">
+                        <span>
+                          {new Date(post.publishedAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                })}
+                        </span>
+                        <span> | {post.author}</span>
+                      </div>
+                    </div>
+                    {isAdmin && (<div className="flex gap-2">
+                        <EditIconButton variant="edit-icon" onClick={function (e) {
+                        e.stopPropagation();
+                        handleEdit(post);
+                    }} aria-label={BLOG_DASHBOARD.BUTTONS.EDIT_BUTTON_ARIA.replace("${post.title}", post.title)}>
+                        </EditIconButton>
+                        <TrashIconButton variant="trash-icon" onClick={function (e) {
+                        e.stopPropagation();
+                        setPostToDelete({ id: post.id, documentId: post.documentId, title: post.title });
+                        setIsConfirmDeleteOpen(true);
+                    }} aria-label={BLOG_DASHBOARD.BUTTONS.DELETE_BUTTON_ARIA.replace("${post.title}", post.title)}>
+                        </TrashIconButton>
+                      </div>)}
+                  </div>
+                  <p className="text-sm text-gray-400 line-clamp-2">{post.description}</p>
+                </div>
+                {index < posts.length - 1 && <Separator className="my-3 bg-gray-700/50"/>}
+              </div>); })}
+          </div>) : (<div className="text-center py-10 text-gray-400">
+            <div className="w-16 h-16 bg-gray-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Send className="w-6 h-6 text-gray-500"/>
+            </div>
+            <p className="font-medium">{BLOG_DASHBOARD.UI.NO_POSTS_MESSAGE}</p>
+            <p className="text-sm">{BLOG_DASHBOARD.UI.NO_POSTS_SUBTEXT}</p>
+          </div>)}
+      </CardContent>
+    </Card>);
+};
+export default BlogDashboard;