From c7e781ffc4b347aa05ce0547a106a01e2fd792f3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Aug 2023 00:49:42 +0800
Subject: ...

---
 FrontEnd/src/components/Skeleton.tsx | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

(limited to 'FrontEnd/src/components/Skeleton.tsx')

diff --git a/FrontEnd/src/components/Skeleton.tsx b/FrontEnd/src/components/Skeleton.tsx
index 3b149db9..03f80df5 100644
--- a/FrontEnd/src/components/Skeleton.tsx
+++ b/FrontEnd/src/components/Skeleton.tsx
@@ -1,32 +1,22 @@
-import * as React from "react";
-import classnames from "classnames";
-import range from "lodash/range";
+import { ComponentPropsWithoutRef } from "react";
+import classNames from "classnames";
+
+import { range } from "~src/utilities";
 
 import "./Skeleton.css";
 
-export interface SkeletonProps {
+interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
   lineNumber?: number;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
-const Skeleton: React.FC<SkeletonProps> = (props) => {
-  const { lineNumber: lineNumberProps, className, style } = props;
-  const lineNumber = lineNumberProps ?? 3;
+export default function Skeleton(props: SkeletonProps) {
+  const { lineNumber, className, ...otherProps } = props;
 
   return (
-    <div className={classnames(className, "cru-skeleton")} style={style}>
-      {range(lineNumber).map((i) => (
-        <div
-          key={i}
-          className={classnames(
-            "cru-skeleton-line",
-            i === lineNumber - 1 && "last"
-          )}
-        />
+    <div className={classNames(className, "cru-skeleton")} {...otherProps}>
+      {range(lineNumber ?? 3).map((i) => (
+        <div key={i} className="cru-skeleton-line" />
       ))}
     </div>
   );
-};
-
-export default Skeleton;
+}
-- 
cgit v1.2.3