Migrate <CircularGallery />

src/constants/Categories.ts

@@ -47,6 +47,7 @@ export const CATEGORIES = [
       'Pixel Card',
       'Carousel',
       'Spotlight Card',
+      'Circular Gallery',
       'Flying Posters',
       'Card Swap',
       'Infinite Scroll',

src/constants/Components.ts

@@ -35,6 +35,7 @@ const components = {
   'pixel-card': () => import("../demo/Components/PixelCardDemo.vue"),
   'carousel': () => import("../demo/Components/CarouselDemo.vue"),
   'spotlight-card': () => import("../demo/Components/SpotlightCardDemo.vue"),
+  'circular-gallery': () => import("../demo/Components/CircularGalleryDemo.vue"),
   'flying-posters': () => import("../demo/Components/FlyingPostersDemo.vue"),
   'card-swap': () => import("../demo/Components/CardSwapDemo.vue"),
   'infinite-scroll': () => import("../demo/Components/InfiniteScrollDemo.vue"),

src/constants/code/Components/circularGalleryCode.ts

@@ -0,0 +1,27 @@
+import code from '@content/Components/CircularGallery/CircularGallery.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const circularGallery: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CircularGallery`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <CircularGallery
+    :items="[
+      { image: 'https://picsum.photos/800/600?random=1', text: 'Beautiful Nature' },
+      { image: 'https://picsum.photos/800/600?random=2', text: 'City Life' },
+      { image: 'https://picsum.photos/800/600?random=3', text: 'Ocean Views' }
+    ]"
+    :bend="3"
+    text-color="#ffffff"
+    :border-radius="0.05"
+    font="bold 30px Arial"
+    :scroll-speed="2"
+    :scroll-ease="0.05"
+  />
+</template>
+
+<script setup lang="ts">
+  import CircularGallery from "./CircularGallery.vue";
+</script>`,
+  code
+}