From e086f2d35b03be67a6a55c6ccf76d256f5d68dd5 Mon Sep 17 00:00:00 2001
From: dibasdauliya <dibasdauliya@gmail.com>
Date: Sun, 25 Aug 2024 22:39:46 -0400
Subject: [PATCH] docs update: add demo for emoji hover

---
 ...ver-wrapper.md => emoji-hover-wrapper.mdx} | 30 +++++++++----------
 example/src/components/emoji-hover/index.tsx  | 22 ++++++++++++++
 2 files changed, 37 insertions(+), 15 deletions(-)
 rename example/docs/hover-wrapper/{emoji-hover-wrapper.md => emoji-hover-wrapper.mdx} (87%)
 create mode 100644 example/src/components/emoji-hover/index.tsx

diff --git a/example/docs/hover-wrapper/emoji-hover-wrapper.md b/example/docs/hover-wrapper/emoji-hover-wrapper.mdx
similarity index 87%
rename from example/docs/hover-wrapper/emoji-hover-wrapper.md
rename to example/docs/hover-wrapper/emoji-hover-wrapper.mdx
index cf755f2..b31479b 100644
--- a/example/docs/hover-wrapper/emoji-hover-wrapper.md
+++ b/example/docs/hover-wrapper/emoji-hover-wrapper.mdx
@@ -1,3 +1,5 @@
+import {EmojiHoverWrapper} from '@site/src/components/emoji-hover';
+
 # Emoji Hover Wrapper
 
 The `<emoji-hover-wrapper>` component is a versatile element that adds an interactive emoji hover effect to any content. It's perfect for adding a touch of playfulness and engagement to your web applications.
@@ -22,21 +24,6 @@ import 'essential-components/src/emoji-hover-wrapper';
 
 After importing, you can use the `<emoji-hover-wrapper>` component in your HTML or JSX. Wrap it around any content you want to associate with an emoji. The component takes two main props: `icon` and `tag`.
 
-```html
-<emoji-hover-wrapper icon="🤩" tag="span">
-  hover over me
-</emoji-hover-wrapper>
-```
-
-## Props
-
-| Prop | Type | Description | Required |
-|------|------|-------------|----------|
-| `icon` | String | The emoji to display on hover. Use the Unicode representation of the emoji. | Yes |
-| `tag` | String | The HTML tag to use for wrapping the content. | Yes |
-
-## Examples
-
 1. Basic usage with text:
 
    ```html
@@ -44,6 +31,8 @@ After importing, you can use the `<emoji-hover-wrapper>` component in your HTML
      Hello, World!
    </emoji-hover-wrapper>
    ```
+  
+<EmojiHoverWrapper emoji="😊" content="Hello, World" tag="span" />
 
 2. Using with a button:
 
@@ -53,6 +42,8 @@ After importing, you can use the `<emoji-hover-wrapper>` component in your HTML
    </emoji-hover-wrapper>
    ```
 
+<EmojiHoverWrapper emoji="👍" content="Click me!" tag="button" />
+
 3. Wrapping a paragraph:
 
    ```html
@@ -62,6 +53,15 @@ After importing, you can use the `<emoji-hover-wrapper>` component in your HTML
    </emoji-hover-wrapper>
    ```
 
+<EmojiHoverWrapper emoji="📚" content="This is a longer piece of text that demonstrates how the emoji-hover-wrapper can be used with block-level elements." tag="p" />
+
+## Props
+
+| Prop | Type | Description | Required |
+|------|------|-------------|----------|
+| `icon` | String | The emoji to display on hover. Use the Unicode representation of the emoji. | Yes |
+| `tag` | String | The HTML tag to use for wrapping the content. | Yes |
+
 ## Behavior
 
 When a user hovers over the wrapped content, the specified emoji will appear near the cursor. The emoji follows the cursor movement within the boundaries of the wrapped content.
diff --git a/example/src/components/emoji-hover/index.tsx b/example/src/components/emoji-hover/index.tsx
new file mode 100644
index 0000000..9afcaee
--- /dev/null
+++ b/example/src/components/emoji-hover/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export function EmojiHoverWrapper({emoji, content, tag}: {
+    emoji: string;
+    content: string;
+    tag: string;
+}) {
+  return (
+    <BrowserOnly>
+      {() => {
+        // Import the custom element only in the browser environment
+        import('essential-components/src/emoji-hover-wrapper')
+        return (
+            <emoji-hover-wrapper icon={emoji} tag={tag}>
+                {content}
+          </emoji-hover-wrapper>
+        );
+      }}
+    </BrowserOnly>
+  );
+}
\ No newline at end of file