Migrated 'Glass Surface' component.

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Glass Surface'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -59,6 +59,7 @@ export const CATEGORIES = [
     subcategories: [
       'Animated List',
       'Masonry',
+      'Glass Surface',
       'Magic Bento',
       'Profile Card',
       'Dock',

src/constants/Components.ts

@@ -47,6 +47,7 @@ const textAnimations = {
 const components = {
   'animated-list': () => import('../demo/Components/AnimatedListDemo.vue'),
   'masonry': () => import('../demo/Components/MasonryDemo.vue'),
+  'glass-surface': () => import('../demo/Components/GlassSurfaceDemo.vue'),
   'magic-bento': () => import('../demo/Components/MagicBentoDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
   'dock': () => import('../demo/Components/DockDemo.vue'),

src/constants/code/Components/glassSurfaceCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Components/GlassSurface/GlassSurface.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const glassSurface = createCodeObject(code, 'Components/GlassSurface', {
+  usage: `<template>
+  <GlassSurface 
+    :width="300"
+    :height="200"
+    :border-radius="24"
+    style="custom-style"
+    />
+</template>
+
+<script setup lang="ts">
+  import GlassSurface from "./GlassSurface.vue";
+</script>`
+});