Create <Counter /> component

src/constants/Categories.ts

@@ -80,7 +80,8 @@ export const CATEGORIES = [
       'Flowing Menu',
       'Elastic Slider',
       'Stack',
-      'Chroma Grid'
+      'Chroma Grid',
+      'Counter'
     ]
   },
   {

src/constants/Components.ts

@@ -69,6 +69,7 @@ const components = {
   'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
   'stack': () => import('../demo/Components/StackDemo.vue'),
   'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
+  'counter': () => import('../demo/Components/CounterDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/counterCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Components/Counter/Counter.vue?raw'
+import { createCodeObject } from '../../../types/code'
+
+export const counter = createCodeObject(code, 'Components/Counter', {
+  installation: `npm i motion-v`,
+  usage: `import Counter from './Counter.vue'
+
+<Counter
+  :value="1"
+  :places="[100, 10, 1]"
+  :fontSize="80"
+  :padding="5"
+  :gap="10"
+  textColor="white"
+  :fontWeight="900"
+/>`,
+})