ivt/dist/skeleton-component/index.mjs

Ivt Components Library

import React__default from 'react';
import { C as Container, a as ChildContainer } from '../chunks/Container-DGNhxyRJ.mjs';
import { S as Skeleton } from '../chunks/skeleton-CIulxewv.mjs';
import '../chunks/utils-05LlW3Cl.mjs';
import '../chunks/bundle-mjs-BYcyWisL.mjs';

const FormSkeleton = ({ count = 4 })=>{
    return /*#__PURE__*/ React__default.createElement("div", {
        className: "space-y-8"
    }, /*#__PURE__*/ React__default.createElement("div", {
        className: "flex max-w-[25rem] flex-col gap-4"
    }, Array.from({
        length: count
    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
            key: i,
            className: "h-[86px] w-[400px]"
        }))));
};

const SectionInfoSkeleton = ({ count = 1 })=>{
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, Array.from({
        length: count
    }).map((_, i)=>/*#__PURE__*/ React__default.createElement("section", {
            key: i,
            className: "relative w-full space-y-2 lg:w-2/5"
        }, /*#__PURE__*/ React__default.createElement(Skeleton, {
            className: "h-8 w-full max-w-lg"
        }), /*#__PURE__*/ React__default.createElement(Skeleton, {
            className: "h-12 w-full max-w-lg"
        }))));
};

const CreateAndUpdateSkeleton = ({ infoCount = 1, formCount = 4 })=>{
    return /*#__PURE__*/ React__default.createElement(Container, null, /*#__PURE__*/ React__default.createElement(ChildContainer, null, /*#__PURE__*/ React__default.createElement(SectionInfoSkeleton, {
        count: infoCount
    }), /*#__PURE__*/ React__default.createElement("div", {
        className: "w-full max-w-[600px] space-y-8"
    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: "h-6 w-[600px]"
    }), /*#__PURE__*/ React__default.createElement(FormSkeleton, {
        count: formCount
    }))));
};

const ListItemSkeleton = ({ count = 1 })=>{
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, Array.from({
        length: count
    }).map((_, i)=>/*#__PURE__*/ React__default.createElement("div", {
            key: i,
            className: "border-b-border flex flex-wrap justify-between border-b p-2.5"
        }, /*#__PURE__*/ React__default.createElement(Skeleton, {
            className: "h-6 w-14"
        }), /*#__PURE__*/ React__default.createElement(Skeleton, {
            className: "h-6 w-30"
        }))));
};

const ShowSkeleton = ({ count = 5 })=>{
    return /*#__PURE__*/ React__default.createElement(Container, null, /*#__PURE__*/ React__default.createElement(ChildContainer, null, /*#__PURE__*/ React__default.createElement("div", {
        className: "space-y-2"
    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: "h-8 w-80"
    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: "h-6 w-[500px]"
    })), /*#__PURE__*/ React__default.createElement("section", {
        className: "mt-4 w-full max-w-[600px] space-y-2 md:flex-[6]"
    }, /*#__PURE__*/ React__default.createElement(ListItemSkeleton, {
        count: count
    }))));
};

export { CreateAndUpdateSkeleton, FormSkeleton, ListItemSkeleton, SectionInfoSkeleton, ShowSkeleton };
//# sourceMappingURL=index.mjs.map