Make table wrapper and table options components

resources/js/components/Others/TableOption.vue

@@ -1,68 +1,19 @@
 <template>
-    <div :class="{'active' : active}"> 
-        <div class="wrapper">
-            <mail-icon v-if="icon === 'email'" class="icon" size="17"/> 
-            <link-icon v-if="icon === 'link'" class="icon" size="17"/>
-            <smile-icon v-if="icon === 'emoji'" class="icon" size="17"/>
-            <folder-icon v-if="icon === 'folder'" class="icon" size="17"/>
-            <b>{{title}}</b>
-            <slot></slot>
-        </div>
+    <div>
+        <slot v-if="activeTab"></slot>
     </div>
 </template>
 
 <script>
-    import {
-        LinkIcon,
-        MailIcon,
-        SmileIcon,
-        FolderIcon } from 'vue-feather-icons'
 
-    export default {
-        name: "TableOption",
-        props: ['title', 'icon', 'active'],
-        components: {
-            LinkIcon,
-            MailIcon,
-            SmileIcon,
-            FolderIcon
+export default {
+    name: "TableOption",
+    props: ['title', 'icon'],
+    data () {
+        return {
+            activeTab: false
         }
-        
-    }
+    },
+}
 </script>
 
-<style scoped lang="scss">
-    @import "@assets/vue-file-manager/_inapp-forms.scss";
-    @import '@assets/vue-file-manager/_forms';
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .icon {
-            margin-right: 10px;
-            path,
-            polyline {
-                color: $theme !important;
-            }
-        }
-     .active {
-            background: $text;
-                b {
-                    color: $light_background !important;
-                }
-        }
-
-    @media (prefers-color-scheme: dark) {
-        
-        .active {
-            background: $dark_mode_text_primary;
-                h1 {
-                    color: $dark_mode_foreground !important;
-                }
-        }
-    }
-
-</style>