Create <Counter /> component

src/demo/Components/CounterDemo.vue

@@ -0,0 +1,195 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[400px] overflow-hidden relative">
+        <Counter
+          :value="value"
+          :places="[100, 10, 1]"
+          gradientFrom="#060010"
+          :fontSize="fontSize"
+          :padding="5"
+          :gap="gap"
+          :borderRadius="10"
+          :horizontalPadding="15"
+          textColor="white"
+          :fontWeight="900"
+        />
+
+        <div class="flex gap-4 bottom-4 justify-center mt-4 absolute left-1/2 transform -translate-x-1/2">
+          <button
+            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            @click="value > 0 && value--"
+          >
+            -
+          </button>
+          <button
+            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            @click="value < 999 && value++"
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <Customize>
+        <PreviewSlider
+          title="Value"
+          v-model="value"
+          :min="0"
+          :max="999"
+          :step="1"
+        />
+
+        <PreviewSlider
+          title="Gap"
+          v-model="gap"
+          :min="0"
+          :max="50"
+          :step="5"
+        />
+
+        <PreviewSlider
+          title="Font Size"
+          v-model="fontSize"
+          :min="40"
+          :max="200"
+          :step="10"
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="counter" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="counter.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+
+import Counter from '../../content/Components/Counter/Counter.vue'
+import { counter } from '../../constants/code/Components/counterCode'
+
+const value = ref(123)
+const fontSize = ref(80)
+const gap = ref(10)
+
+const propData = [
+  {
+    name: "value",
+    type: "number",
+    default: "N/A (required)",
+    description: "The numeric value to display in the counter."
+  },
+  {
+    name: "fontSize",
+    type: "number",
+    default: "100",
+    description: "The base font size used for the counter digits."
+  },
+  {
+    name: "padding",
+    type: "number",
+    default: "0",
+    description: "Additional padding added to the digit height."
+  },
+  {
+    name: "places",
+    type: "number[]",
+    default: "[100, 10, 1]",
+    description: "An array of place values to determine which digits to display."
+  },
+  {
+    name: "gap",
+    type: "number",
+    default: "8",
+    description: "The gap (in pixels) between each digit."
+  },
+  {
+    name: "borderRadius",
+    type: "number",
+    default: "4",
+    description: "The border radius (in pixels) for the counter container."
+  },
+  {
+    name: "horizontalPadding",
+    type: "number",
+    default: "8",
+    description: "The horizontal padding (in pixels) for the counter container."
+  },
+  {
+    name: "textColor",
+    type: "string",
+    default: "'white'",
+    description: "The text color for the counter digits."
+  },
+  {
+    name: "fontWeight",
+    type: "string | number",
+    default: "'bold'",
+    description: "The font weight of the counter digits."
+  },
+  {
+    name: "containerStyle",
+    type: "CSSProperties",
+    default: "{}",
+    description: "Custom inline styles for the outer container."
+  },
+  {
+    name: "counterStyle",
+    type: "CSSProperties",
+    default: "{}",
+    description: "Custom inline styles for the counter element."
+  },
+  {
+    name: "digitStyle",
+    type: "CSSProperties",
+    default: "{}",
+    description: "Custom inline styles for each digit container."
+  },
+  {
+    name: "gradientHeight",
+    type: "number",
+    default: "16",
+    description: "The height (in pixels) of the gradient overlays."
+  },
+  {
+    name: "gradientFrom",
+    type: "string",
+    default: "'black'",
+    description: "The starting color for the gradient overlays."
+  },
+  {
+    name: "gradientTo",
+    type: "string",
+    default: "'transparent'",
+    description: "The ending color for the gradient overlays."
+  },
+  {
+    name: "topGradientStyle",
+    type: "CSSProperties",
+    default: "undefined",
+    description: "Custom inline styles for the top gradient overlay."
+  },
+  {
+    name: "bottomGradientStyle",
+    type: "CSSProperties",
+    default: "undefined",
+    description: "Custom inline styles for the bottom gradient overlay."
+  },
+]
+</script>