@dnb/eufemia/components/skeleton/figures/Article.js

DNB Eufemia Design System UI Library

import { useMemo } from 'react';
import { clsx } from 'clsx';
import Space from "../../space/Space.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SkeletonArticle({
  rows = 3,
  children = null,
  ...rest
}) {
  const rowsLength = useMemo(() => {
    const fill = [70, 80, 60, 40, 50, 20, 0];
    return Array.from({
      length: Number(rows)
    }, (_, i) => {
      const c = i % fill.length;
      if (c === fill.length - 1) {
        fill.reverse();
      }
      return fill[c];
    });
  }, [rows]);
  return _jsxs("div", {
    className: clsx('dnb-skeleton__figure', 'dnb-skeleton__figure--show'),
    "aria-busy": true,
    ...rest,
    children: [_jsx(Space, {
      element: "div",
      bottom: "large",
      className: clsx('dnb-h--xx-large', 'dnb-skeleton', 'dnb-skeleton--shape'),
      "aria-hidden": true,
      style: {
        width: '50%'
      },
      children: "\u200C"
    }), rowsLength.map((p, i) => _jsx(Space, {
      element: "div",
      top: "x-small",
      className: clsx('dnb-p', 'dnb-skeleton', 'dnb-skeleton--shape'),
      style: {
        width: `${p}%`
      },
      children: "\u200C"
    }, i)), typeof children === 'function' ? children() : children]
  });
}
export default SkeletonArticle;
//# sourceMappingURL=Article.js.map