From 2989f93e9300b195459057bd03b3a8104619b1f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Goran=20Alkovi=C4=87?=
 <77000136+goranalkovic-infinum@users.noreply.github.com>
Date: Fri, 5 Jul 2024 08:49:00 +0200
Subject: [PATCH] fix docusaurus build

---
 .../components/component-showcase.js          | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/website/ui-components/components/component-showcase.js b/website/ui-components/components/component-showcase.js
index bd9d1e2a9..4d0360bf9 100644
--- a/website/ui-components/components/component-showcase.js
+++ b/website/ui-components/components/component-showcase.js
@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react';
 import { Button } from '@eightshift/ui-components';
 import { clsx } from 'clsx';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 export const ComponentShowcase = ({
 	children,
@@ -14,30 +15,34 @@ export const ComponentShowcase = ({
 	const ref = useRef();
 
 	return (
-		<div className='es-uic-flex es-uic-font-sans'>
-			<div
-				className={clsx(
-					'es-uic-border es-uic-border-dashed es-uic-border-gray-200 es-uic-p-4 es-uic-rounded-lg es-uic-space-y-2.5 es-uic-shrink-0',
-					fitWidth ? 'es-uic-w-fit' : 'es-uic-w-96',
-					className
-				)}
-			>
-				{typeof children === 'function' && children(data, setData)}
-				{typeof children !== 'function' && children}
-			</div>
-
-			<div className='es-uic-space-y-2.5 es-uic-ml-3 es-uic-grow'>
-				{preContent && preContent(data, setData, ref)}
-				{resettable && (
-					<Button
-						size='small'
-						onPress={() => setData(defaultValue)}
-						disabled={data === defaultValue}
+		<BrowserOnly>
+			{() => (
+				<div className='es-uic-flex es-uic-font-sans'>
+					<div
+						className={clsx(
+							'es-uic-border es-uic-border-dashed es-uic-border-gray-200 es-uic-p-4 es-uic-rounded-lg es-uic-space-y-2.5 es-uic-shrink-0',
+							fitWidth ? 'es-uic-w-fit' : 'es-uic-w-96',
+							className
+						)}
 					>
-						Reset
-					</Button>
-				)}
-			</div>
-		</div>
+						{typeof children === 'function' && children(data, setData)}
+						{typeof children !== 'function' && children}
+					</div>
+
+					<div className='es-uic-space-y-2.5 es-uic-ml-3 es-uic-grow'>
+						{preContent && preContent(data, setData, ref)}
+						{resettable && (
+							<Button
+								size='small'
+								onPress={() => setData(defaultValue)}
+								disabled={data === defaultValue}
+							>
+								Reset
+							</Button>
+						)}
+					</div>
+				</div>
+			)}
+		</BrowserOnly>
 	);
 };