feat(component): New checkbox component (#151)

* feat(component): New component checkbox

* feat(component): checkbox docs and link checkbox

* added gradient to home page

* remove unused props

* code refactor

* code refactor

* fix type error

* convert div to label

src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,35 @@
+<template>
+  <label class="flex gap-3 items-center justify-start">
+    <input v-model="model" type="checkbox" :disabled="disabled" :class="checkboxClasses" />
+    <span v-if="label" :class="labelClasses">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useCheckboxClasses } from './composables/useCheckboxClasses'
+
+interface CheckboxProps {
+  modelValue?: boolean,
+  label?: string,
+  disabled?: boolean,
+}
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { checkboxClasses, labelClasses } = useCheckboxClasses()
+</script>

src/components/Checkbox/composables/useCheckboxClasses.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+// LABEL
+const defaultLabelClasses = 'block text-sm font-medium text-gray-900 dark:text-gray-300'
+
+// CHECKBOX
+const defaultCheckboxClasses = 'w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500'
+
+export function useCheckboxClasses() {
+  const checkboxClasses = computed(() => {
+      return simplifyTailwindClasses(defaultCheckboxClasses)
+  })
+
+  const labelClasses = computed(() => {
+    return defaultLabelClasses
+  })
+
+  return { 
+    checkboxClasses,
+    labelClasses,
+  }
+}