From 114d54410292821dba151f64f87900716bf283bf Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Tue, 15 Jul 2025 12:10:43 +0300
Subject: [PATCH] refactor: update PreviewColor props to be optional and adjust
 layout in demos

---
 src/components/common/PreviewColor.vue        |  3 +--
 src/components/landing/Hero/Hero.vue          |  2 +-
 src/constants/code/Backgrounds/balatroCode.ts |  6 +++---
 src/demo/Backgrounds/AuroraDemo.vue           | 20 ++++++++-----------
 src/demo/Backgrounds/BalatroDemo.vue          |  4 ++--
 5 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/common/PreviewColor.vue b/src/components/common/PreviewColor.vue
index 20a8e60..c43e884 100644
--- a/src/components/common/PreviewColor.vue
+++ b/src/components/common/PreviewColor.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title?: string;
   modelValue: string;
   disabled?: boolean;
 }>();
@@ -27,7 +27,6 @@ const handleColorChange = (event: Event) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .color-label {
diff --git a/src/components/landing/Hero/Hero.vue b/src/components/landing/Hero/Hero.vue
index a2a6435..d570179 100644
--- a/src/components/landing/Hero/Hero.vue
+++ b/src/components/landing/Hero/Hero.vue
@@ -31,7 +31,7 @@
         split-type="words"
         :delay="10"
         :duration="1"
-        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+        text="Sixty-plus snippets, ready to be dropped into your Vue projects"
       />
 
       <router-link to="/text-animations/split-text" class="landing-button">
diff --git a/src/constants/code/Backgrounds/balatroCode.ts b/src/constants/code/Backgrounds/balatroCode.ts
index fa61237..a48e7cd 100644
--- a/src/constants/code/Backgrounds/balatroCode.ts
+++ b/src/constants/code/Backgrounds/balatroCode.ts
@@ -6,9 +6,9 @@ export const balatro: CodeObject = {
   installation: `npm install ogl`,
   usage: `<template>
     <Balatro
-    :is-rotate="false"
-    :mouse-interaction="true"
-    :pixel-filter="700"
+      :is-rotate="false"
+      :mouse-interaction="true"
+      :pixel-filter="700"
     />
 </template>
 
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 1473adb..9df1115 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -14,18 +14,14 @@
         </div>
 
         <Customize>
-          <div class="space-y-2">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>
-
-            <div class="flex gap-4">
-              <PreviewColor
-                v-for="(color, index) in colorStops"
-                :key="index"
-                :title="`Color ${index + 1}`"
-                :model-value="color"
-                @update:model-value="value => updateColorStop(index, value)"
-              />
-            </div>
+          <div class="flex gap-2">
+            <PreviewColor
+              v-for="(color, index) in colorStops"
+              :key="index"
+              :title="`Color ${index + 1}`"
+              :model-value="color"
+              @update:model-value="value => updateColorStop(index, value)"
+            />
           </div>
 
           <PreviewSlider
diff --git a/src/demo/Backgrounds/BalatroDemo.vue b/src/demo/Backgrounds/BalatroDemo.vue
index b0de718..5cc9fa9 100644
--- a/src/demo/Backgrounds/BalatroDemo.vue
+++ b/src/demo/Backgrounds/BalatroDemo.vue
@@ -14,7 +14,7 @@
       </div>
 
       <Customize>
-        <div class="flex gap-4">
+        <div class="flex gap-2">
           <PreviewColor
             v-for="(color, index) in colorStops"
             :key="index"
@@ -24,7 +24,7 @@
           />
         </div>
 
-        <PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
+        <PreviewSlider title="Pixelation" v-model="pixelation" :min="100" :max="2000" :step="10" />
 
         <PreviewSwitch title="Enable Mouse Interaction" v-model="mouseInteractionEnabled" />