add LogItem

Author: andresdlt03

ethernet-view/src/assets/svg/folder-closed.svg

@@ -0,0 +1,22 @@
+.logItemWrapper {
+    display: flex;
+    align-items: center;
+    gap: .8rem;
+    width: fit-content;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.icon {
+    width: 1.8rem;
+
+    img {
+        width: 100%;
+    }
+}
+
+.title {
+    font-size: 1.2rem;
+}

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogItem/LogItem.module.scss

@@ -1 +1,21 @@
+import styles from "./LogItem.module.scss"
+import folderClosed from "assets/svg/folder-closed.svg"
 
+interface Props {
+    logName: string;
+}
+
+export const LogItem = ({logName}: Props) => {
+    return (
+        <div className={styles.logItemWrapper}>
+            <div className={styles.icon}>
+                <img src={folderClosed} alt="log-icon" />
+            </div>
+            <div className={styles.title}>
+                <p>
+                    {logName}
+                </p>
+            </div>
+        </div>
+    )
+}

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogItem/LogItem.tsx

@@ -0,0 +1,4 @@
+.logListWrapper {
+    display: flex;
+    flex-direction: column;
+}

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.module.scss

@@ -1,13 +1,15 @@
+import { LogItem } from "./LogItem/LogItem";
+import styles from "./LogList.module.scss"
 
 interface Props {
     logNames: string[];
 }
 
 export const LogList = ({logNames}: Props) => {
     return (
-        <div>
+        <div className={styles.logListWrapper}>
             {logNames.map((logName) => (
-                <div key={logName}>{logName}</div>
+                <LogItem key={logName} logName={logName} />
             ))}
         </div>
     )