docs update: add demo for emoji hover

example/docs/hover-wrapper/emoji-hover-wrapper.md → 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,28 +24,15 @@ 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
    <emoji-hover-wrapper icon="😊" tag="span">
      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.

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>
+  );
+}