add table to my queries

src/views/MyQueries.vue

@@ -1,24 +1,145 @@
 <template>
   <div>
-    My queries
+    <div id="my-queries-content">
+      <div class="rounded-bg">
+      <div class="header-container">
+        <div>
+          <div class="fixed-header" ref="name-th">
+            Name
+          </div>
+          <div class="fixed-header">
+            Created at
+          </div>
+        </div>
+      </div>
+      <div
+        class="table-container"
+        ref="table-container"
+      >
+        <table ref="table">
+          <tbody>
+            <tr v-for="(query, index) in queries" :key="query.id" @click="openQuery(index)">
+              <td ref="name-td">
+                  {{ query.name }}
+              </td>
+              <td>
+                <div class="second-column">
+                  <div class="date-container">{{ query.createdAt }}</div>
+                  <div class="icons-container">
+                    <rename-icon />
+                    <copy-icon />
+                    <export-icon />
+                    <delete-icon />
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
+</div>
 </template>
 
 <script>
+import RenameIcon from '@/components/svg/rename.vue'
+import CopyIcon from '@/components/svg/copy.vue'
+import ExportIcon from '@/components/svg/export.vue'
+import DeleteIcon from '@/components/svg/delete.vue'
+
 export default {
   name: 'MyQueries',
   components: {
+    RenameIcon,
+    CopyIcon,
+    ExportIcon,
+    DeleteIcon
   },
   data () {
     return {
+      queries: []
     }
   },
-  computed: {
-  },
   created () {
-    // Get queries
+    this.queries = JSON.parse(localStorage.getItem('myQueries'))
+  },
+  mounted () {
+    new ResizeObserver(this.calcNameWidth).observe(this.$refs.table)
+    this.calcNameWidth()
   },
   methods: {
+    calcNameWidth () {
+      this.$refs['name-th'].style = `width: ${this.$refs['name-td'][0].offsetWidth}px`
+    },
+    openQuery (index) {
+      const tab = this.queries[index]
+      tab.isUnsaved = false
+      this.$store.commit('addTab', tab)
+      this.$store.commit('setCurrentTabId', tab.id)
+      this.$router.push('/editor')
+    }
   }
 }
 </script>
+
+<style scoped>
+#my-queries-content {
+  padding: 52px;
+}
+.rounded-bg {
+  margin: 0 auto;
+  max-width: 1500px;
+  width: 100%;
+}
+table {
+  margin-top: 0;
+  width: 100%;
+  max-width: 100%;
+}
+tbody tr td {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  padding: 0 24px;
+  line-height: 40px;
+}
+
+tbody tr td:first-child {
+  width: 70%;
+  max-width: 0;
+}
+tbody tr td:last-child {
+  width: 30%;
+  max-width: 0;
+}
+
+tbody tr:hover td {
+  cursor: pointer;
+}
+
+tbody tr:hover td {
+  color: var(--color-text-active);
+}
+
+.second-column {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+}
+
+.icons-container {
+  display: none;
+}
+.date-container {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+tbody tr:hover .icons-container {
+  display: block;
+}
+</style>