Added FileSharing, fixed css

src/components/dashboard/DeviceList.vue

@@ -6,7 +6,7 @@
   }>();
 
   interface Sections {
-    title: string,
+    title?: string,
     id: string,
     icon?: string,
     devices?: {
@@ -15,7 +15,7 @@
       ip: string,
       mac: string,
     }[],
-  }
+  };
 </script>
 
 <template>

src/components/dashboard/FileSharing.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+  const { sections, pageTitle, pageID } = defineProps<{
+    pageTitle: string,
+    pageID: string,
+    sections?: Sections[],
+  }>();
+
+  interface Sections {
+    title?: string,
+    id: string,
+    buttons?: string[],
+    networkPath?: string,
+    networkFolders?: {
+      shareName?: string,
+      folderName?: string,
+      volumeName: string,
+      read?: boolean,
+      write?: boolean,
+      totalSpace?: number,
+      freeSpace?: number,
+    }[],
+  };
+</script>
+
+<template>
+  <div :id="pageID">
+    <h2 class="title">{{ pageTitle }}</h2>
+    <section
+      v-for="section in sections"
+      :id="section.id"
+      :key="section.id"
+    >
+      <h3>{{ section.title }}</h3>
+      <div v-if="section.networkPath" id="networkPathSection">
+        <p>Network path:</p>
+        <p>{{ section.networkPath }}</p>
+      </div>
+      <template v-else/>
+      <div 
+        v-if="section.networkFolders"
+        id="networkFolderSection"
+      >
+        <div id="networkFolderKey">
+          <p>Share Name</p>
+          <p>Folder Name</p>
+          <p>Volume Name</p>
+          <p>Read</p>
+          <p>Write</p>
+          <p>Total Space</p>
+          <p>Free Space</p>
+        </div>
+        <div class="seperator"></div>
+        <form 
+          v-if="section.networkFolders" 
+          v-for="networkFolder in section.networkFolders"
+        >
+          <div id="networkFolder">
+            <p>{{ networkFolder.shareName }}</p>
+            <p>{{ networkFolder.folderName }}</p>
+            <p>{{ networkFolder.volumeName }}</p>
+            <p>{{ networkFolder.read ? "Yes" : "No" }}</p>
+            <p>{{ networkFolder.write ? "Yes" : "No" }}</p>
+            <p>{{ networkFolder.totalSpace }} GB</p>
+            <p>{{ networkFolder.freeSpace }} GB</p>
+          </div>
+        </form>
+      </div>
+      <template v-else/>
+      <div v-if="section.buttons" id="buttons">
+        <button v-for="button in section.buttons">{{ button }}</button>
+      </div>
+      <template v-else/>
+      <div class="seperator-section"></div>
+    </section>
+  </div>
+</template>
+
+<style src="@/styles/basicDashboard.css" scoped></style>

src/components/dashboard/Template.vue

@@ -24,7 +24,7 @@
         selectedRadio?: number,
       }[],
     }[],
-  }
+  };
 </script>
 
 <template>

src/data/DeviceList.ts

@@ -52,7 +52,7 @@ const deviceList = [
     title: "Unknown",
     id: "unkownDevices",
     icon: other,
-  }
+  },
 ];
 
 export default deviceList;

src/data/FileSharing.ts

@@ -0,0 +1,25 @@
+const fileSharing = [
+  {
+    title: "General",
+    id: "networkPath",
+    networkPath: "\\\\share",
+  },
+  {
+    title: "Network Folders",
+    id: "networkFolders",
+    networkFolders: [
+      {
+        shareName: "My Share",
+        folderName: "My Folder",
+        volumeName: "My Volume",
+        read: true,
+        write: false,
+        totalSpace: 35,
+        freeSpace: 10,
+      },
+    ],
+    buttons: ["Edit", "Eject all USB Devices"]
+  },
+];
+
+export default fileSharing;

src/data/QoS.ts

@@ -18,8 +18,8 @@ const qos = [{
       class: "buttonOption",
       option: "hidden",
       buttons: ["Update Now"]
-    }
+    },
-  ]
+  ],
-}]
+}];
 
 export default qos;

src/data/Wireless.ts

@@ -228,7 +228,7 @@ const Wireless = [
         class: "inputOption",
         option: "input",
         label: "Password (Network Key)",
-      }
+      },
     ],
   },
 ];

src/pages/basicDashboard/FileShare.vue

@@ -1,7 +1,17 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  import BasicDashboard from '@/components/dashboard/FileSharing.vue';
+  import fileSharing from '@/data/FileSharing.ts';
+  const pageTitle="File Share Settings"
+  const pageID="fileShareComponent"
+
+  const sections = shallowRef([] as typeof fileSharing);
+
+  sections.value = fileSharing;
+</script>
+
 <template>
-  <div>
+  <BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
-    <h2 class="title">File Share</h2>
-  </div>
 </template>
 
 <style src="@/styles/basicDashboard.css" scoped></style>

src/styles/basicDashboard.css

@@ -112,13 +112,12 @@
 #internetSetupComponent, #wirelessSettingsComponent, #qosComponent {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 30px;
   align-items: center;
   max-width: 70%;
   margin: auto;
 
   section {
-    margin-bottom: 10px;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -209,13 +208,12 @@
 #deviceList {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 30px;
   align-items: center;
   max-width: 70%;
   margin: auto;
 
   section {
-    margin-bottom: 10px;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -252,4 +250,78 @@
   #noDevicesFound {
     text-align: center;
   }
+}
+
+#fileShareComponent {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  max-width: 70%;
+  margin: auto;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  button {
+    color: inherit;
+    background-color: var(--dark-bg-alt-2-color);
+    border: none;
+    height: 50px;
+    width: fit-content;
+    border-radius: 5px;
+    transition: 0.3s background-color;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0 30px;
+  }
+  button:hover {
+    background-color: var(--dark-highlight-color);
+  }
+  #networkFolderSection {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    padding: 20px;
+    border-radius: 5px;
+    background-color: var(--dark-bg-alt-2-color);
+    h3 {
+      font-size: 2rem;
+    }
+    svg {
+      width: 30px;
+    }
+    header {
+      display: flex;
+      gap: 10px;
+    }
+  }
+  #networkFolderKey, #networkFolder {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 5px;
+    p {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  #buttons {
+    display: flex;
+    gap: 10px;
+  }
+  #networkPathSection {
+    display: flex;
+    gap: 20px;
+  }
 }

src/styles/main.css

@@ -163,6 +163,13 @@ a {
   width: 100%;
 }
 
+.seperator-section {
+  background-color: #4c4c4c;
+  height: 2px;
+  width: 100%;
+  margin-top: 30px;
+}
+
 input[type="radio"], input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;