Refactor

unovue · Oct 23, 2024 · fb24005 · fb24005
1 parent c818e1a
commit fb24005
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
diff --git a/components/content/common/HomePageExamples.vue b/components/content/common/HomePageExamples.vue
@@ -7,32 +7,58 @@
   <div
     class="flex max-w-7xl w-full lg:flex-row flex-col items-center justify-center flex-wrap p-4 gap-4"
   >
-    <DotBackground class="py-8 px-4 border rounded-lg flex flex-col gap-4 h-fit">
+    <PatternBackground
+      :animate="true"
+      :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
+      :variant="PATTERN_BACKGROUND_VARIANT.Dot"
+      class="w-full items-center py-8 px-4 border rounded-lg flex flex-col gap-4 h-fit"
+      :speed="PATTERN_BACKGROUND_SPEED.Slow"
+    >
       <h3
         class="text-3xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
       >
         3D Card Hover Effect
       </h3>
       <CardDemo2 />
-    </DotBackground>
+    </PatternBackground>
 
-    <DotBackground class="py-8 px-4 border rounded-lg flex flex-col h-fit">
+    <PatternBackground
+      :animate="true"
+      :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
+      :variant="PATTERN_BACKGROUND_VARIANT.Dot"
+      class="w-full items-center py-8 px-4 border rounded-lg flex flex-col gap-4 h-fit"
+      :speed="PATTERN_BACKGROUND_SPEED.Slow"
+    >
       <h3
         class="text-3xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
       >
         Text Hover Effect
       </h3>
       <p>Hover below to reveal text</p>
       <TextHoverEffectDemo />
-    </DotBackground>
+    </PatternBackground>
 
-    <DotBackground class="py-8 px-4 border rounded-lg flex flex-col gap-4 h-fit">
+    <PatternBackground
+      :animate="true"
+      :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
+      :variant="PATTERN_BACKGROUND_VARIANT.Dot"
+      class="w-full items-center py-8 px-4 border rounded-lg flex flex-col gap-4 h-fit"
+      :speed="PATTERN_BACKGROUND_SPEED.Slow"
+    >
       <h3
         class="text-3xl font-bold relative z-20 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8"
       >
         Radiant Text
       </h3>
       <RadiantTextDemo />
-    </DotBackground>
+    </PatternBackground>
   </div>
 </template>
+
+<script lang="ts" setup>
+import {
+  PATTERN_BACKGROUND_DIRECTION,
+  PATTERN_BACKGROUND_SPEED,
+  PATTERN_BACKGROUND_VARIANT,
+} from "../inspira/ui/pattern-background";
+</script>
diff --git a/components/content/inspira/examples/pattern-background/PatternBackgroundBigDotDemo.vue b/components/content/inspira/examples/pattern-background/PatternBackgroundBigDotDemo.vue
@@ -5,7 +5,6 @@ import {
   PATTERN_BACKGROUND_SPEED,
   PATTERN_BACKGROUND_VARIANT,
 } from "../../ui/pattern-background";
-import PatternBackground from "../../ui/pattern-background/PatternBackground.vue";
 </script>
 
 <template>

diff --git a/components/content/inspira/examples/pattern-background/PatternBackgroundDotDemo.vue b/components/content/inspira/examples/pattern-background/PatternBackgroundDotDemo.vue
@@ -4,7 +4,6 @@ import {
   PATTERN_BACKGROUND_SPEED,
   PATTERN_BACKGROUND_VARIANT,
 } from "../../ui/pattern-background";
-import PatternBackground from "../../ui/pattern-background/PatternBackground.vue";
 </script>
 
 <template>

diff --git a/components/content/inspira/examples/pattern-background/PatternBackgroundGridDemo.vue b/components/content/inspira/examples/pattern-background/PatternBackgroundGridDemo.vue
@@ -3,7 +3,6 @@ import {
   PATTERN_BACKGROUND_DIRECTION,
   PATTERN_BACKGROUND_VARIANT,
 } from "../../ui/pattern-background";
-import PatternBackground from "../../ui/pattern-background/PatternBackground.vue";
 </script>
 
 <template>

diff --git a/components/content/inspira/examples/pattern-background/PatternBackgroundGridSmallDemo.vue b/components/content/inspira/examples/pattern-background/PatternBackgroundGridSmallDemo.vue
@@ -4,7 +4,6 @@ import {
   PATTERN_BACKGROUND_SPEED,
   PATTERN_BACKGROUND_VARIANT,
 } from "../../ui/pattern-background";
-import PatternBackground from "../../ui/pattern-background/PatternBackground.vue";
 </script>
 
 <template>

diff --git a/content/2.components/pattern-background.md b/content/2.components/pattern-background.md
@@ -1,6 +1,9 @@
 ---
 title: Pattern Background
 description: Simple animated pattern background to make your sections stand out.
+navBadges:
+  - value: Updated
+    type: info
 ---
 
 Grid background with dot