FrontEnd/src/components/Skeleton.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { ComponentPropsWithoutRef } from "react";
import classNames from "classnames";

import { range } from "~src/utilities";

import "./Skeleton.css";

interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
  lineNumber?: number;
}

export default function Skeleton(props: SkeletonProps) {
  const { lineNumber, className, ...otherProps } = props;

  return (
    <div className={classNames(className, "cru-skeleton")} {...otherProps}>
      {range(lineNumber ?? 3).map((i) => (
        <div key={i} className="cru-skeleton-line" />
      ))}
    </div>
  );
}