From 5284f38c002e5bf88e308e208456d41d4126b30e Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 22 Aug 2023 00:10:30 +0800
Subject: ...

---
 FrontEnd/src/views/common/list/ListContainer.css   |  4 ++++
 FrontEnd/src/views/common/list/ListContainer.tsx   | 23 ++++++++++++++++++++++
 .../src/views/common/list/ListItemContainer.css    |  3 +++
 .../src/views/common/list/ListItemContainer.tsx    | 23 ++++++++++++++++++++++
 FrontEnd/src/views/common/list/index.ts            |  4 ++++
 5 files changed, 57 insertions(+)
 create mode 100644 FrontEnd/src/views/common/list/ListContainer.css
 create mode 100644 FrontEnd/src/views/common/list/ListContainer.tsx
 create mode 100644 FrontEnd/src/views/common/list/ListItemContainer.css
 create mode 100644 FrontEnd/src/views/common/list/ListItemContainer.tsx
 create mode 100644 FrontEnd/src/views/common/list/index.ts

(limited to 'FrontEnd/src/views/common/list')

diff --git a/FrontEnd/src/views/common/list/ListContainer.css b/FrontEnd/src/views/common/list/ListContainer.css
new file mode 100644
index 00000000..679f139d
--- /dev/null
+++ b/FrontEnd/src/views/common/list/ListContainer.css
@@ -0,0 +1,4 @@
+.cru-list-container {
+  border: 1px solid var(--cru-button-primary-normal-color);
+  border-radius: 5px;
+}
diff --git a/FrontEnd/src/views/common/list/ListContainer.tsx b/FrontEnd/src/views/common/list/ListContainer.tsx
new file mode 100644
index 00000000..aa00d12c
--- /dev/null
+++ b/FrontEnd/src/views/common/list/ListContainer.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
+import classNames from "classnames";
+
+import "./ListContainer.css"
+
+function _ListContainer(
+  { className, children, ...otherProps }: ComponentPropsWithoutRef<"div">,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames("cru-list-container", className)}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+}
+
+const ListContainer = forwardRef(_ListContainer);
+
+export default ListContainer;
diff --git a/FrontEnd/src/views/common/list/ListItemContainer.css b/FrontEnd/src/views/common/list/ListItemContainer.css
new file mode 100644
index 00000000..4c08a8d1
--- /dev/null
+++ b/FrontEnd/src/views/common/list/ListItemContainer.css
@@ -0,0 +1,3 @@
+.cru-list-item-container {
+  border: 1px solid var(--cru-button-primary-normal-color);
+}
diff --git a/FrontEnd/src/views/common/list/ListItemContainer.tsx b/FrontEnd/src/views/common/list/ListItemContainer.tsx
new file mode 100644
index 00000000..315cbd6e
--- /dev/null
+++ b/FrontEnd/src/views/common/list/ListItemContainer.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
+import classNames from "classnames";
+
+import "./ListItemContainer.css";
+
+function _ListItemContainer(
+  { className, children, ...otherProps }: ComponentPropsWithoutRef<"div">,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames("cru-list-item-container", className)}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+}
+
+const ListItemContainer = forwardRef(_ListItemContainer);
+
+export default ListItemContainer;
diff --git a/FrontEnd/src/views/common/list/index.ts b/FrontEnd/src/views/common/list/index.ts
new file mode 100644
index 00000000..e183f7da
--- /dev/null
+++ b/FrontEnd/src/views/common/list/index.ts
@@ -0,0 +1,4 @@
+import ListContainer from "./ListContainer";
+import ListItemContainer from "./ListItemContainer";
+
+export { ListContainer, ListItemContainer };
-- 
cgit v1.2.3