Merge pull request #330 from infinum/feature/fe-libs-tailwind

FE libs Tailwind - part 4.5
infinum · Jul 5, 2024 · 842e3be · 842e3be
2 parents 9ac878c + 2989f93
commit 842e3be
Showing 1 changed file with 29 additions and 24 deletions.
diff --git 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>
 	);
 };