first commit

app/src/components/ui/list/List.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import RenameInput from "../inputs/RenameInput";
+import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+
+interface ListProps {
+  items?: { id: string; name: string }[]; // Optional array of items to render
+  placeholder?: string; // Optional placeholder text
+}
+
+const List: React.FC<ListProps> = ({ items = [] }) => {
+  return (
+    <>
+      {items.length > 0 ? (
+        <ul className="list-wrapper">
+          {items.map((item, index) => (
+            <li key={index} className="list-container">
+              <div className="list-item">
+                <div className="value">
+                  <RenameInput value={item.name} />
+                </div>
+                <div className="options-container">
+                  <div className="lock option">
+                    <LockIcon isLocked />
+                  </div>
+                  <div className="visibe option">
+                    <EyeIcon isClosed />
+                  </div>
+                  <div className="remove option">
+                    <RmoveIcon />
+                  </div>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className="list-wrapper">
+          <div className="no-item">No items to display</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default List;