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.css | 10 ++++++++--
 FrontEnd/src/components/Skeleton.tsx | 32 +++++++++++---------------------
 FrontEnd/src/utilities/index.ts      | 17 +++++++++++++++++
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/FrontEnd/src/components/Skeleton.css b/FrontEnd/src/components/Skeleton.css
index a571eead..0f78d3b5 100644
--- a/FrontEnd/src/components/Skeleton.css
+++ b/FrontEnd/src/components/Skeleton.css
@@ -4,11 +4,17 @@
 
 .cru-skeleton-line {
   height: 1em;
-  background-color: hsl(0, 0%, 90%);
+  background-color: hsl(0 0% 90%);
   margin: 0.7em 0;
   border-radius: 0.2em;
 }
 
-.cru-skeleton-line.last {
+@media (prefers-color-scheme: dark) {
+  .cru-skeleton-line {
+    background-color: hsl(0 0% 20%);
+  }
+}
+
+.cru-skeleton-line:last-child {
   width: 50%;
 }
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;
+}
diff --git a/FrontEnd/src/utilities/index.ts b/FrontEnd/src/utilities/index.ts
index 085f8ae3..7659a8aa 100644
--- a/FrontEnd/src/utilities/index.ts
+++ b/FrontEnd/src/utilities/index.ts
@@ -8,3 +8,20 @@ export function delay(milliseconds: number): Promise<void> {
     }, milliseconds);
   });
 }
+
+export function range(stop: number): number[];
+export function range(start: number, stop: number, step?: number): number[];
+export function range(start: number, stop?: number, step?: number): number[] {
+  if (stop == undefined) {
+    stop = start;
+    start = 0;
+  }
+  if (step == undefined) {
+    step = 1;
+  }
+  const result: number[] = [];
+  for (let i = start; i < stop; i += step) {
+    result.push(i);
+  }
+  return result;
+}
-- 
cgit v1.2.3