feat(content): create wavy doc

kosori · Sep 29, 2024 · 5da753f · 5da753f
1 parent f92b0b1
commit 5da753f
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/apps/www/content/docs/mini/links/wavy.mdx b/apps/www/content/docs/mini/links/wavy.mdx
@@ -0,0 +1,40 @@
+---
+title: Wavy
+description: Flick effect on hover
+---
+
+<ComponentPreview name='wavy'>
+```json doc-gen:file
+{
+  "file": "./src/components/demos/Wavy/Wavy.tsx",
+  "codeblock": true
+}
+```
+</ComponentPreview>
+
+## Installation
+
+<Steps>
+
+  <Step>
+    ### Download the svg
+
+    Download the [`wavy.svg`](/wavy.svg) file.
+
+  </Step>
+
+  <Step>
+    ### Change stroke color
+
+    Change the stroke color of the `path` to your desired hover color.
+
+    ```diff
+    <pattern id="wavePattern" width="80" height="80" x="0" y="0" patternUnits="userSpaceOnUse">
+    --  <path ... stroke="#B1AFB8" ... />
+    ++  <path ... stroke="#6E56CF" ... />
+    </pattern>
+    ```
+
+  </Step>
+
+</Steps>