@asgerami/zemenay-blog/dist/components/LoadingStates.js

Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration

"use strict";
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Skeleton = Skeleton;
exports.BlogPostSkeleton = BlogPostSkeleton;
exports.BlogListSkeleton = BlogListSkeleton;
exports.AdminPanelSkeleton = AdminPanelSkeleton;
exports.RichTextEditorSkeleton = RichTextEditorSkeleton;
exports.FadeIn = FadeIn;
exports.SlideIn = SlideIn;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
function Skeleton({ width = "100%", height = "1rem", borderRadius = "4px", className = "", }) {
    return ((0, jsx_runtime_1.jsx)("div", { className: `skeleton ${className}`, style: {
            width,
            height,
            borderRadius,
        } }));
}
function BlogPostSkeleton({ className = "" }) {
    return ((0, jsx_runtime_1.jsxs)("article", { className: `blog-post-skeleton ${className}`, children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "80%", className: "skeleton-title" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-badges", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "80px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "60px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "100px", borderRadius: "20px" })] }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "150px", className: "skeleton-meta" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-content", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "95%" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "88%" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "92%" })] })] }));
}
function BlogListSkeleton({ count = 3, className = "", }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: `blog-list-skeleton ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "skeleton-search", children: (0, jsx_runtime_1.jsx)(Skeleton, { height: "3rem", borderRadius: "25px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-filter-bar", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "120px" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-filter-items", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "100px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "80px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "120px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "90px", borderRadius: "20px" })] })] }), Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)(BlogPostSkeleton, {}, index)))] }));
}
function AdminPanelSkeleton({ className = "" }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: `admin-panel-skeleton ${className}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "skeleton-admin-header", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "200px" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-admin-actions", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "2.5rem", width: "100px", borderRadius: "4px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "2.5rem", width: "80px", borderRadius: "4px" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-form", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "150px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "3rem", borderRadius: "4px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "3rem", borderRadius: "4px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "200px", borderRadius: "8px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-posts-list", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "100px" }), Array.from({ length: 2 }).map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "skeleton-post-item", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "1.5rem", width: "70%" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "40%" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-post-actions", children: [(0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "60px", borderRadius: "4px" }), (0, jsx_runtime_1.jsx)(Skeleton, { height: "2rem", width: "70px", borderRadius: "4px" })] })] }, index)))] })] }));
}
function RichTextEditorSkeleton({ className = "", }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: `rich-text-editor-skeleton ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "skeleton-toolbar", children: Array.from({ length: 12 }).map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton, { height: "36px", width: "40px", borderRadius: "4px" }, index))) }), (0, jsx_runtime_1.jsx)("div", { className: "skeleton-editor-content", children: (0, jsx_runtime_1.jsx)(Skeleton, { height: "200px", borderRadius: "4px" }) })] }));
}
function FadeIn({ children, delay = 0, duration = 300, className = "", }) {
    const [isVisible, setIsVisible] = react_1.default.useState(false);
    react_1.default.useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(true);
        }, delay);
        return () => clearTimeout(timer);
    }, [delay]);
    return ((0, jsx_runtime_1.jsx)("div", { className: `fade-in ${isVisible ? "fade-in-visible" : ""} ${className}`, style: {
            transitionDuration: `${duration}ms`,
            transitionDelay: `${delay}ms`,
        }, children: children }));
}
function SlideIn({ children, direction = "up", delay = 0, duration = 300, className = "", }) {
    const [isVisible, setIsVisible] = react_1.default.useState(false);
    react_1.default.useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(true);
        }, delay);
        return () => clearTimeout(timer);
    }, [delay]);
    return ((0, jsx_runtime_1.jsx)("div", { className: `slide-in slide-in-${direction} ${isVisible ? "slide-in-visible" : ""} ${className}`, style: {
            transitionDuration: `${duration}ms`,
            transitionDelay: `${delay}ms`,
        }, children: children }));
}