@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
12 lines (11 loc) • 683 B
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { styled } from '@fidely-ui/styled-system/jsx';
import { Skeleton } from './skeleton';
export const SkeletonText = forwardRef(function SkeletonText(props, ref) {
const { noOfLines = 3, spacing = '0.5rem', skeletonHeight = '50px', ...rest } = props;
const lines = Array.from({ length: noOfLines }).map((_, i) => (_jsx(Skeleton, { height: skeletonHeight, mb: i === noOfLines - 1 ? 0 : spacing, ...rest }, i)));
return (_jsx(styled.div, { ref: ref, display: "flex", flexDirection: "column", ...rest, children: lines }));
});
SkeletonText.displayName = 'SkeletonText';