- get plans via api

- subscribe to plan at the frontend

resources/js/components/FilesView/CheckBox.vue

@@ -1,44 +1,39 @@
 <template>
-    <div class="select-box" :class="[isClicked ? 'bg-theme' : 'is-deactive'] ">
-        <CheckIcon v-if="isClicked" class="icon" size="17" />
-    </div>
+	<div>
+		<div
+			class="w-5 h-5 flex items-center justify-center rounded-md"
+			:class="{'bg-theme': isClicked, 'dark:bg-dark-foreground bg-light-background': !isClicked}"
+			@click="changeState"
+		>
+			<CheckIcon v-if="isClicked" class="vue-feather text-white" size="17" />
+		</div>
+	</div>
 </template>
 
 <script>
-import { CheckIcon } from 'vue-feather-icons'
+import {CheckIcon} from 'vue-feather-icons'
 
 export default {
-    name: 'CheckBox',
-    props: [ 'isClicked' ],
-    components: { CheckIcon }
+	name: 'CheckBox',
+	props: [
+		'isClicked'
+	],
+	components: {
+		CheckIcon
+	},
+	data() {
+		return {
+			isSwitched: undefined
+		}
+	},
+	methods: {
+		changeState() {
+			this.isSwitched = ! this.isSwitched
+			this.$emit('input', this.isSwitched)
+		}
+	},
+	mounted() {
+		this.isSwitched = this.isClicked
+	}
 }
 </script>
-
-<style lang="scss" scoped>
-@import '/resources/sass/vuefilemanager/_variables';
-
-.select-box {
-    min-width: 20px;
-    min-height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-
-    .icon {
-        stroke: white;
-    }
-}
-
-.is-deactive {
-    background-color: darken($light_background, 5%);
-}
-
-.dark {
-    
-    .is-deactive {
-        background-color: lighten($dark_mode_foreground, 10%);
-    }
-}
-
-</style>