...

6 files changed, 89 insertions, 61 deletions

diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index 9d644ab7..e3216b86 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -1,79 +1,50 @@
-import { useCallback } from "react";
-import * as React from "react";
-import classnames from "classnames";
-import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
+import { useC, Text } from "./common";
 import LoadingButton from "./button/LoadingButton";
 
 import "./SearchInput.css";
 
-export interface SearchInputProps {
+interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
   onButtonClick: () => void;
-  className?: string;
   loading?: boolean;
-  buttonText?: string;
-  placeholder?: string;
-  additionalButton?: React.ReactNode;
-  alwaysOneline?: boolean;
+  className?: string;
+  buttonText?: Text;
 }
 
-const SearchInput: React.FC<SearchInputProps> = (props) => {
-  const { onChange, onButtonClick, alwaysOneline } = props;
-
-  const { t } = useTranslation();
-
-  const onInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      onChange(event.currentTarget.value);
-    },
-    [onChange]
-  );
-
-  const onInputKeyPress = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>): void => {
-      if (event.key === "Enter") {
-        onButtonClick();
-        event.preventDefault();
-      }
-    },
-    [onButtonClick]
-  );
+export default function SearchInput({
+  value,
+  onChange,
+  onButtonClick,
+  loading,
+  className,
+  buttonText,
+}: SearchInputProps) {
+  const c = useC();
 
   return (
-    <div
-      className={classnames(
-        "cru-search-input",
-        alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
-        props.className
-      )}
-    >
+    <div className={classNames("cru-search-input", className)}>
       <input
         type="text"
-        className="cru-search-input-input me-sm-2 flex-grow-1"
-        value={props.value}
-        onChange={onInputChange}
-        onKeyPress={onInputKeyPress}
-        placeholder={props.placeholder}
+        className="cru-search-input-input"
+        value={value}
+        onChange={(event) => {
+          const { value } = event.currentTarget;
+          onChange(value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            onButtonClick();
+            event.preventDefault();
+          }
+        }}
       />
-      {props.additionalButton ? (
-        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2">
-          {props.additionalButton}
-        </div>
-      ) : null}
-      <div
-        className={classnames(
-          alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0",
-          "flex-shrink-0"
-        )}
-      >
-        <LoadingButton loading={props.loading} onClick={props.onButtonClick}>
-          {props.buttonText ?? t("search")}
-        </LoadingButton>
-      </div>
+
+      <LoadingButton loading={loading} onClick={onButtonClick}>
+        {c(buttonText ?? "search")}
+      </LoadingButton>
     </div>
   );
-};
-
-export default SearchInput;
+}
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 };