Merge pull request #30 from jhanma17dev/Feat-add-folder-component

feat: Add folder component

src/constants/Categories.ts

@@ -67,6 +67,7 @@ export const CATEGORIES = [
       'Spotlight Card',
       'Circular Gallery',
       'Flying Posters',
+      'Folder',
       'Card Swap',
       'Infinite Scroll',
       'Tilted Card',

src/constants/Components.ts

@@ -55,6 +55,7 @@ const components = {
   'spotlight-card': () => import('../demo/Components/SpotlightCardDemo.vue'),
   'circular-gallery': () => import('../demo/Components/CircularGalleryDemo.vue'),
   'flying-posters': () => import('../demo/Components/FlyingPostersDemo.vue'),
+  'folder': () => import('../demo/Components/FolderDemo.vue'),
   'card-swap': () => import('../demo/Components/CardSwapDemo.vue'),
   'infinite-scroll': () => import('../demo/Components/InfiniteScrollDemo.vue'),
   'glass-icons': () => import('../demo/Components/GlassIconsDemo.vue'),

src/constants/code/Components/folderCode.ts

@@ -0,0 +1,16 @@
+import code from '@content/Components/Folder/Folder.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const folder: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Folder`,
+  usage: `<template>
+  <Folder :items="items" :size="2" color="#5227FF" class="my-folder-class" />
+</template>
+
+<script setup lang="ts">
+  import Folder from "./Folder.vue";
+
+  const items = ['Doc 1', 'Doc 2', 'Doc 3'];
+</script>`,
+  code
+};