From 7879eb7fb21281104238336d8a30a23139326dc2 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 19 Aug 2022 23:18:37 +0530
Subject: [PATCH] feat: created `ResourceList` component

---
 .../frontend/src/components/ResourceList.tsx  | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 services/frontend/src/components/ResourceList.tsx

diff --git a/services/frontend/src/components/ResourceList.tsx b/services/frontend/src/components/ResourceList.tsx
new file mode 100644
index 0000000..f6a4c8e
--- /dev/null
+++ b/services/frontend/src/components/ResourceList.tsx
@@ -0,0 +1,114 @@
+import { MinusSmIcon, PlusIcon } from "@heroicons/react/outline";
+import { Button, styled } from "@mui/joy";
+import IconButton from "@mui/joy/IconButton";
+import { FunctionComponent, ReactElement, ReactNode } from "react";
+
+export interface IResourceListProps {
+  items: string[];
+  selectedItem: string;
+  newActionText: string;
+  getText: (uuid: string) => ReactNode;
+  onEdit: (item: string) => void;
+  onNew: () => void;
+  onRemove: (item: string) => void;
+}
+
+interface IListItemProps {
+  selected: boolean;
+}
+
+const Root = styled("div")`
+  padding: ${({ theme }) => theme.spacing(0)};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: solid #eaeaea 1px;
+`;
+
+const Top = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Bottom = styled("div")`
+  padding: ${({ theme }) => theme.spacing(1, 2)};
+`;
+
+const ListItem = styled("div")<IListItemProps>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1, 1, 1, 2)};
+  cursor: pointer;
+  background-color: ${({ selected }) => selected && "#f5f5f5"};
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+
+const ListItemText = styled("h5")`
+  font-weight: 400;
+  font-size: 14px;
+`;
+
+const RemoveButton = styled(IconButton)`
+  width: 24px;
+  max-height: 16px;
+`;
+
+const ResourceList: FunctionComponent<IResourceListProps> = (
+  props: IResourceListProps
+): ReactElement => {
+  const {
+    onNew,
+    onRemove,
+    onEdit,
+    getText,
+    items,
+    selectedItem,
+    newActionText
+  } = props;
+
+  const handleEdit = (networkUuid: string) => () => onEdit(networkUuid);
+
+  const handleRemove = (networkUuid: string) => (event: any) => {
+    event.stopPropagation();
+    onRemove(networkUuid);
+  };
+
+  return (
+    <Root>
+      <Top>
+        {items.map((item: string) => (
+          <ListItem
+            key={item}
+            onClick={handleEdit(item)}
+            selected={item === selectedItem}
+          >
+            <ListItemText>{getText(item)}</ListItemText>
+            <RemoveButton
+              variant="soft"
+              size="sm"
+              color="danger"
+              onClick={handleRemove(item)}
+            >
+              <MinusSmIcon className="h-4 w-4" />
+            </RemoveButton>
+          </ListItem>
+        ))}
+      </Top>
+
+      <Bottom>
+        <Button variant="plain" size="sm" onClick={onNew}>
+          <PlusIcon className="h-4 w-4 mr-2" />
+          {newActionText}
+        </Button>
+      </Bottom>
+    </Root>
+  );
+};
+
+export default ResourceList;