Demo Improvements and Masonry

src/constants/Categories.ts

@@ -19,7 +19,7 @@ export const CATEGORIES = [
   {
     name: 'Components',
     subcategories: [
-
+      'Masonry',
     ],
   },
   {

src/constants/Components.ts

@@ -7,7 +7,7 @@ const textAnimations = {
 };
 
 const components = {
-
+  'masonry': () => import("../demo/Components/MasonryDemo.vue"),
 };
 
 const backgrounds = {

src/constants/code/Components/masonryCode.ts

@@ -0,0 +1,32 @@
+import code from '@content/Components/Masonry/Masonry.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const masonry: CodeObject = {
+  cli: `npx jsrepo add https://vuebits.dev/Components/Masonry`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <Masonry
+    :items="items"
+    :duration="0.6"
+    :stagger="0.05"
+    animate-from="bottom"
+    :scale-on-hover="true"
+    :hover-scale="0.95"
+    :blur-to-focus="true"
+    :color-shift-on-hover="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from "./Masonry.vue"
+
+const items = ref([
+  { id: '1', img: 'https://picsum.photos/300/400?random=1', url: 'https://picsum.photos', height: 400 },
+  { id: '2', img: 'https://picsum.photos/300/600?random=2', url: 'https://picsum.photos', height: 600 },
+  { id: '3', img: 'https://picsum.photos/300/350?random=3', url: 'https://picsum.photos', height: 350 },
+  // ... more items
+])
+</script>`,
+  code
+}