From 298ac645d80ec7fce4c883abfea59e00103e1a11 Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Sat, 2 Aug 2025 13:51:18 +0700
Subject: [PATCH] feat(ChromaGridDemo): integrate customize component

---
 src/demo/Components/ChromaGridDemo.vue | 31 +++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/demo/Components/ChromaGridDemo.vue b/src/demo/Components/ChromaGridDemo.vue
index 96f4b09..050bde5 100644
--- a/src/demo/Components/ChromaGridDemo.vue
+++ b/src/demo/Components/ChromaGridDemo.vue
@@ -2,10 +2,21 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container relative overflow-hidden">
-        <ChromaGrid />
+        <ChromaGrid :radius="radius" :damping="damping" :fadeOut="fadeOut" :ease="ease" />
       </div>
 
+      <Customize>
+        <PreviewSlider title="Radius" v-model="radius" :min="50" :max="600" :step="10" />
+
+        <PreviewSlider title="Damping" v-model="damping" :min="0.1" :max="5" :step="0.5" />
+
+        <PreviewSlider title="Fade Out" v-model="fadeOut" :min="0" :max="2" :step="0.1" />
+
+        <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
+      </Customize>
+
       <PropTable :data="propData" />
+
       <Dependencies :dependency-list="['gsap']" />
     </template>
 
@@ -20,14 +31,28 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
-
-import { chromaGrid } from '../../constants/code/Components/chromaGridCode';
 import ChromaGrid from '../../content/Components/ChromaGrid/ChromaGrid.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import { chromaGrid } from '../../constants/code/Components/chromaGridCode';
+
+const radius = ref(300);
+const damping = ref(0.45);
+const fadeOut = ref(0.6);
+const ease = ref('power3.out');
+
+const easeOptions = [
+  { label: 'Power3 Out', value: 'power3.out' },
+  { label: 'Bounce Out', value: 'bounce.out' },
+  { label: 'Elastic Out', value: 'elastic.out(1, 0.3)' }
+];
 
 const propData = [
   {