Merge pull request #14 from Whbbit1999/stack-component

feat: Stack component

src/constants/Categories.ts

@@ -67,7 +67,8 @@ export const CATEGORIES = [
       'Glass Icons',
       'Decay Card',
       'Flowing Menu',
-      'Elastic Slider'
+      'Elastic Slider',
+      'Stack'
     ]
   },
   {

src/constants/Components.ts

@@ -34,8 +34,8 @@ const textAnimations = {
   'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
-  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
-  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
+  'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
   'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
 };
 
@@ -55,7 +55,8 @@ const components = {
   'decay-card': () => import('../demo/Components/DecayCardDemo.vue'),
   'flowing-menu': () => import('../demo/Components/FlowingMenuDemo.vue'),
   'elastic-slider': () => import('../demo/Components/ElasticSliderDemo.vue'),
-  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue')
+  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
+  'stack': () => import('../demo/Components/StackDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/stackCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/Stack/Stack.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const stack: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Stack`,
+  usage: `<template>
+  <Stack
+    :randomRotation="true"
+    :sensitivity="180"
+    :sendToBackOnClick="false"
+    :cardDimensions="{ width: 200, height: 200 }"
+    :cardsData="images"
+  ></Stack>
+</template>
+
+<script setup lang="ts">
+  import Stack from './Stack.vue'
+  const images = [
+    { id: 1, img: "https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format" },
+    { id: 2, img: "https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format" },
+    { id: 3, img: "https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format" },
+    { id: 4, img: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format" }
+  ];
+</script>`,
+  code
+};