From 8456b3430c55dc0a9f14d0042da3a99c6a210aff Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Sat, 2 Aug 2025 12:46:36 +0700
Subject: [PATCH] feat(MagnetLinesDemo): integrate customize component

---
 src/demo/Animations/MagnetLinesDemo.vue | 50 ++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/demo/Animations/MagnetLinesDemo.vue b/src/demo/Animations/MagnetLinesDemo.vue
index 46d3094..4c9eaa2 100644
--- a/src/demo/Animations/MagnetLinesDemo.vue
+++ b/src/demo/Animations/MagnetLinesDemo.vue
@@ -2,9 +2,31 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container">
-        <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
+        <MagnetLines
+          :rows="rows"
+          :columns="columns"
+          container-size="500px"
+          :line-width="lineWidthPx"
+          :line-height="lineHeightPx"
+          :line-color="lineColor"
+          :base-angle="baseAngle"
+        />
       </div>
 
+      <Customize>
+        <PreviewColor title="Line Color" v-model="lineColor" />
+
+        <PreviewSlider title="Rows" v-model="rows" :min="5" :max="maxRows" :step="1" />
+
+        <PreviewSlider title="Columns" v-model="columns" :min="5" :max="15" :step="1" />
+
+        <PreviewSlider title="Line Height (px)" v-model="lineHeight" :min="10" :max="50" :step="5" />
+
+        <PreviewSlider title="Line Width (px)" v-model="lineWidth" :min="1" :max="5" :step="1" />
+
+        <PreviewSlider title="Base Angle (°)" v-model="baseAngle" :min="-45" :max="45" :step="1" />
+      </Customize>
+
       <PropTable :data="propData" />
     </template>
 
@@ -19,13 +41,39 @@
 </template>
 
 <script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
 import MagnetLines from '../../content/Animations/MagnetLines/MagnetLines.vue';
 import { magnetLines } from '@/constants/code/Animations/magnetLinesCode';
 
+const lineHeight = ref(30);
+const lineWidth = ref(2);
+const lineColor = ref('#efefef');
+const baseAngle = ref(-10);
+const columns = ref(12);
+
+const lineWidthPx = computed(() => `${lineWidth.value}px`);
+const lineHeightPx = computed(() => `${lineHeight.value}px`);
+
+const maxRows = computed(() => {
+  const containerHeight = 500;
+  return Math.floor(containerHeight / lineHeight.value);
+});
+
+const rows = ref(Math.min(10, maxRows.value));
+
+watch(lineHeight, () => {
+  nextTick(() => {
+    rows.value = Math.min(rows.value, maxRows.value);
+  });
+});
+
 const propData = [
   {
     name: 'rows',