Merge pull request #1395 from crupest/dev

Refector 2023 v0.1

1 files changed, 22 insertions, 0 deletions

diff --git a/FrontEnd/src/components/Skeleton.tsx b/FrontEnd/src/components/Skeleton.tsx
new file mode 100644
index 00000000..03f80df5
--- /dev/null
+++ b/FrontEnd/src/components/Skeleton.tsx
@@ -0,0 +1,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>
+  );
+}