update values

ui/src/pages/Information/Npmpackages/components/Package.tsx

@@ -0,0 +1,34 @@
+import { Card, Col, Skeleton, Space, Tag, Typography } from "antd";
+import React from "react";
+import { PackageProps } from "pages/Information/Npmpackages/utils/types";
+const { Title } = Typography;
+import style from "pages/Information/Npmpackages/Npmpackages.module.scss";
+
+const Package: React.FC<PackageProps> = (props) => {
+	const onClick = (url: string) => {
+		window.open(url, "_blank", "noopener");
+	};
+
+	const { version, new: status, url, key } = props.resource;
+
+	return (
+		<Col xs={24} lg={12}>
+			<Card onClick={() => onClick(url)}>
+				<Skeleton loading={false}>
+					<Space>
+						<Title level={3}>
+							{key}@{version}
+						</Title>
+					</Space>
+					{status && (
+						<Tag className={style.npm__card_tag} color="#2db7f5">
+							NEW
+						</Tag>
+					)}
+				</Skeleton>
+			</Card>
+		</Col>
+	);
+};
+
+export default Package;

ui/src/pages/Information/Npmpackages/components/PackageList.tsx

@@ -1,53 +1,21 @@
 import React from "react";
-import { Card, Col, Row, Skeleton, Space, Tag, Typography } from "antd";
+import { Row } from "antd";
 import { PackageListProps } from "pages/Information/Npmpackages/utils/types";
 import style from "pages/Information/Npmpackages/Npmpackages.module.scss";
-
-const { Title } = Typography;
+import Package from "./Package";
+import PackageSkeleton from "./PackageSkeleton";
 
 const PackageList: React.FC<PackageListProps> = ({ packages, isLoading }) => {
-	const onClick = (url: string) => {
-		window.open(url, "_blank", "noopener");
-	};
+	const LoadingComponent = [...Array(4).keys()].map((x) => (
+		<PackageSkeleton key={x} />
+	));
 
+	const ListComponent = packages?.map((info) => (
+		<Package key={info.key} resource={info} />
+	));
 	return (
 		<Row gutter={[16, 16]} className={style.npm}>
-			{isLoading
-				? Array.from({ length: 4 }, (_, index) => (
-						<Col key={index} xs={24} lg={12}>
-							<Card className={style.npm__card}>
-								<Skeleton loading={isLoading}>
-									<Space>
-										<Title level={3}>Loading...</Title>
-									</Space>
-								</Skeleton>
-							</Card>
-						</Col>
-				  ))
-				: packages.map((info) => (
-						<Col key={info.key} xs={24} lg={12}>
-							<Card
-								onClick={() => onClick(info.url)}
-								className={style.npm__card}
-							>
-								<Skeleton loading={isLoading}>
-									<Space>
-										<Title level={3}>
-											{info.key}@{info.version}
-										</Title>
-									</Space>
-									{info.new && (
-										<Tag
-											className={style.npm__card_tag}
-											color="#2db7f5"
-										>
-											NEW
-										</Tag>
-									)}
-								</Skeleton>
-							</Card>
-						</Col>
-				  ))}
+			{isLoading ? LoadingComponent : ListComponent}
 		</Row>
 	);
 };

ui/src/pages/Information/Npmpackages/components/PackageSkeleton.tsx

@@ -0,0 +1,20 @@
+import { Card, Col, Skeleton, Space, Typography } from "antd";
+import React from "react";
+
+const { Title } = Typography;
+
+const PackageSkeleton: React.FC = () => {
+	return (
+		<Col xs={24} lg={12}>
+			<Card>
+				<Skeleton loading={true}>
+					<Space>
+						<Title level={3}>Loading...</Title>
+					</Space>
+				</Skeleton>
+			</Card>
+		</Col>
+	);
+};
+
+export default PackageSkeleton;

ui/src/pages/Information/Npmpackages/utils/types.ts

@@ -1,5 +1,16 @@
+interface Package {
+	key: string;
+	url: string;
+	version: string;
+	new: boolean;
+}
+
+interface PackageProps {
+	resource: Package;
+}
+
 interface PackageListProps {
-	packages: { key: string; url: string; version: string; new: boolean }[];
+	packages: Package[];
 	isLoading: boolean;
 }
 
@@ -8,4 +19,4 @@ const PACKAGE_QUERY_URL =
 	"https://raw.githubusercontent.com/lifeparticle/binarytree/main/api/packages.json";
 
 export { PACKAGE_QUERY_KEY, PACKAGE_QUERY_URL };
-export type { PackageListProps };
+export type { PackageListProps, PackageProps };

ui/src/pages/Tools/Diffchecker/index.tsx

@@ -4,7 +4,6 @@ import React, { useState } from "react";
 import { diffLines, Change } from "diff";
 import { ResponsiveButton } from "components/General/FormComponents";
 import style from "./Diffchecker.module.scss";
-import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 
 const { TextArea } = Input;