47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
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 = [] }) => {
|
|
console.log('items: ', 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;
|