Simplify constants declaration

src/constants/code/Components/animatedListCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/AnimatedList/AnimatedList.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const animatedList: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/AnimatedList`,
+export const animatedList = createCodeObject(code, 'Components/AnimatedList', {
   installation: `npm install motion-v`,
   usage: `<template>
   <AnimatedList
@@ -22,6 +21,5 @@ const items = [
   'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10',
   'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'
 ]
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/cardSwapCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/CardSwap/CardSwap.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const cardSwap: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CardSwap`,
+export const cardSwap = createCodeObject(code, 'Components/CardSwap', {
   installation: `npm install gsap`,
   usage: `<template>
   <CardSwap 
@@ -49,6 +48,5 @@ export const cardSwap: CodeObject = {
   const handleCardClick = (index: number) => {
     console.log(\`Card \${index} clicked\`);
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/carouselCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Carousel/Carousel.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const carousel: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Carousel`,
+export const carousel = createCodeObject(code, 'Components/Carousel', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Carousel 
@@ -35,6 +34,5 @@ export const carousel: CodeObject = {
     },
     // Add more items as needed
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/chromaGridCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ChromaGrid/ChromaGrid.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const chromaGrid: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ChromaGrid`,
+export const chromaGrid = createCodeObject(code, 'Components/ChromaGrid', {
   installation: `npm install gsap`,
   usage: `<template>
   <div class="w-[600px] relative">
@@ -39,6 +38,5 @@ export const chromaGrid: CodeObject = {
     url: "https://linkedin.com/in/mikechen"
   }
 ]
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/circularGalleryCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/CircularGallery/CircularGallery.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const circularGallery: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CircularGallery`,
+export const circularGallery = createCodeObject(code, 'Components/CircularGallery', {
   installation: `npm install ogl`,
   usage: `<template>
   <CircularGallery
@@ -22,6 +21,5 @@ export const circularGallery: CodeObject = {
 
 <script setup lang="ts">
   import CircularGallery from "./CircularGallery.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/decayCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/DecayCard/DecayCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const decayCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/DecayCard`,
+export const decayCard = createCodeObject(code, 'Components/DecayCard', {
   installation: `npm install gsap`,
   usage: `<template>
   <DecayCard
@@ -18,6 +17,5 @@ export const decayCard: CodeObject = {
 
 <script setup lang="ts">
   import DecayCard from "./DecayCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/dockCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Dock/Dock.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const dock: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Dock`,
+export const dock = createCodeObject(code, 'Components/Dock', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Dock
@@ -42,6 +41,5 @@ export const dock: CodeObject = {
       onClick: () => console.log('Settings clicked!') 
     },
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/elasticSliderCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const elasticSlider: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ElasticSlider`,
+export const elasticSlider = createCodeObject(code, 'Components/ElasticSlider', {
   usage: `<template>  
   <ElasticSlider 
     :default-value="75"
@@ -25,6 +24,5 @@ export const elasticSlider: CodeObject = {
 
 <script setup lang="ts">
   import ElasticSlider from "./ElasticSlider.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/flowingMenuCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const flowingMenu: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlowingMenu`,
+export const flowingMenu = createCodeObject(code, 'Components/FlowingMenu', {
   installation: `npm install gsap`,
   usage: `<template>
   <FlowingMenu :items="items" />
@@ -17,6 +16,5 @@ export const flowingMenu: CodeObject = {
     { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
     { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/flyingPostersCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const flyingPosters: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
+export const flyingPosters = createCodeObject(code, 'Components/FlyingPosters', {
   installation: `npm install ogl`,
   usage: `<template>
   <FlyingPosters 
@@ -32,6 +31,5 @@ export const flyingPosters: CodeObject = {
   'https://picsum.photos/800/800?grayscale&random=9',
   'https://picsum.photos/800/800?grayscale&random=10',
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/folderCode.ts

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

src/constants/code/Components/glassIconsCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/GlassIcons/GlassIcons.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const glassIcons: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GlassIcons`,
+export const glassIcons = createCodeObject(code, 'Components/GlassIcons', {
   usage: `<template>
   <GlassIcons :items="items" class="my-glass-icons" />
 </template>
@@ -18,6 +17,5 @@ export const glassIcons: CodeObject = {
     { icon: 'pi pi-pencil', color: 'orange', label: 'Notes' },
     { icon: 'pi pi-chart-bar', color: 'green', label: 'Stats' }
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/gooeyNavCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/GooeyNav/GooeyNav.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const gooeyNav: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GooeyNav`,
+export const gooeyNav = createCodeObject(code, 'Components/GooeyNav', {
   usage: `<template>
   <GooeyNav
     :items="navItems"
@@ -35,6 +34,5 @@ export const gooeyNav: CodeObject = {
     --color-3: #45b7d1;
     --color-4: #f9ca24;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Components/infiniteScrollCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const infiniteScroll: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/InfiniteScroll`,
+export const infiniteScroll = createCodeObject(code, 'Components/InfiniteScroll', {
   installation: `npm install gsap`,
   usage: `<template>
   <InfiniteScroll
@@ -29,6 +28,5 @@ export const infiniteScroll: CodeObject = {
     { content: "Item 3" },
     // Add more items as needed
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/magicBentoCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/MagicBento/MagicBento.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const magicBento: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/MagicBento`,
+export const magicBento = createCodeObject(code, 'Components/MagicBento', {
   installation: `npm install gsap`,
   usage: `<template>
     <MagicBento
@@ -21,6 +20,5 @@ export const magicBento: CodeObject = {
 
 <script setup lang="ts">
   import MagicBento from "./MagicBento.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/masonryCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Masonry/Masonry.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const masonry: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Masonry`,
+export const masonry = createCodeObject(code, 'Components/Masonry', {
   installation: `npm install gsap`,
   usage: `<template>
   <Masonry
@@ -27,6 +26,5 @@ const items = ref([
   { id: '3', img: 'https://picsum.photos/300/350?random=3', url: 'https://picsum.photos', height: 350 },
   // ... more items
 ])
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/pixelCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/PixelCard/PixelCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const pixelCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/PixelCard`,
+export const pixelCard = createCodeObject(code, 'Components/PixelCard', {
   usage: `<template>
   <PixelCard 
     variant="default" 
@@ -16,6 +15,5 @@ export const pixelCard: CodeObject = {
 
 <script setup lang="ts">
   import PixelCard from "./PixelCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/profileCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ProfileCard/ProfileCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const profileCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+export const profileCard = createCodeObject(code, 'Components/ProfileCard', {
   usage: `<template>
   <ProfileCard
     name="Javi A. Torres"
@@ -26,6 +25,5 @@ export const profileCard: CodeObject = {
   const handleContactClick = () => {
     console.log('Contact button clicked!');
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/spotlightCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const spotlightCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/SpotlightCard`,
+export const spotlightCard = createCodeObject(code, 'Components/SpotlightCard', {
   usage: `<template>
   <SpotlightCard 
     class-name="custom-spotlight-card"
@@ -14,6 +13,5 @@ export const spotlightCard: CodeObject = {
 
 <script setup lang="ts">
   import SpotlightCard from "./SpotlightCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/stackCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Stack/Stack.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const stack: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Stack`,
+export const stack = createCodeObject(code, 'Components/Stack', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Stack
@@ -22,6 +21,5 @@ export const stack: CodeObject = {
     { 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
-};
+</script>`
+});

src/constants/code/Components/tiltedCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/TiltedCard/TiltedCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const tiltedCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/TiltedCard`,
+export const tiltedCard = createCodeObject(code, 'Components/TiltedCard', {
   installation: `npm install motion-v`,
   usage: `<template>
   <TiltedCard
@@ -29,6 +28,5 @@ export const tiltedCard: CodeObject = {
 
 <script setup lang="ts">
   import TiltedCard from "./TiltedCard.vue";
-</script>`,
-  code
-};
+</script>`
+});