Feat layout shift demo (#8)

* fix: updated layout shift demo

* fix: fixed the close/open menu text

Author: Austin1serb

.gitignore

@@ -1,6 +1,6 @@
 # package artifacts
 node_modules/
-.next/
+**/.next/
 dist/
 coverage/
 test-results/

examples/demo/src/app/(test)/ReactState.tsx

@@ -47,9 +47,14 @@ function Header({ theme }: { theme: 'light' | 'dark' }) {
 		<div
 			ref={ref}
 			className="space-y-2 text-center">
-			<h1 className={`text-3xl font-bold ${theme === 'light' ? 'text-gray-900' : 'text-white'}`}>React State Management</h1>
-
-			<p className={`${theme === 'light' ? 'text-gray-600' : 'text-gray-400'}`}>Reactive state management with React</p>
+			<h1 className={`text-3xl font-bold ${theme === 'light' ? 'text-gray-900' : 'text-white'}`}>
+				React State <span className="max-[450px]:hidden">Management</span>
+			</h1>
+
+			<p className={`${theme === 'light' ? 'text-gray-600' : 'text-gray-400'}`}>
+				Reactive state management with React <br />
+				<span className="text-xs text-gray-500">Re-renders O(n)</span>
+			</p>
 		</div>
 	);
 }
@@ -148,7 +153,7 @@ function InteractiveCard({
 			{/* Sliding Menu */}
 			<div className={`overflow-hidden ${menuOpen ? 'max-h-[160px]' : 'max-h-0'} `}>
 				<div className={`border-t border-gray-200 p-6 transition-all duration-0! ${theme === 'dark' ? 'bg-gray-700' : 'bg-white'}`}>
-					<p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>✨ This panel slides open and has to re-render!</p>
+					<p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} text-center`}>✨ This panel slides open and has to re-render!</p>
 				</div>
 			</div>
 		</div>
@@ -160,9 +165,11 @@ function StateDisplay({ theme, accent, menuOpen }: { theme: 'light' | 'dark'; ac
 	const ref = useRenderTracker('StateDisplay');
 
 	return (
-		<div ref={ref}>
+		<div
+			ref={ref}
+			className="max-[450px]:hidden">
 			<div
-				className={`mt-5 flex justify-center gap-4 space-y-1 text-center font-mono text-sm capitalize ${accent === 'violet' ? 'text-violet-500' : accent === 'emerald' ? 'text-emerald-500' : 'text-amber-500'}`}>
+				className={`mt-5 **:text-nowrap flex justify-center gap-4 space-y-1 text-center font-mono text-sm capitalize ${accent === 'violet' ? 'text-violet-500' : accent === 'emerald' ? 'text-emerald-500' : 'text-amber-500'}`}>
 				<div className="flex gap-1">theme: {theme} </div>
 				<div className="flex gap-1">accent: {accent}</div>
 				<div className="flex gap-1">menu: {menuOpen ? 'Open' : 'Closed'}</div>

examples/demo/src/app/(test)/ZeroState.tsx

@@ -3,7 +3,7 @@
 import useUI from '@austinserb/react-zero-ui';
 import { useRenderTracker } from './ReactTracker';
 
-export function TestComponent() {
+export function TestComponentZero() {
 	const ref = useRenderTracker('TestComponent');
 	const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light');
 	const [, setAccent] = useUI<'violet' | 'emerald' | 'amber'>('accent', 'violet');
@@ -33,7 +33,7 @@ function Header() {
 			<h1 className="theme-light:text-gray-900 theme-dark:text-white text-3xl font-bold">Zero UI</h1>
 
 			<p className="theme-light:text-gray-600 theme-dark:text-gray-400">
-				Reactive state without re-rendering OR prop drilling. <br />
+				Reactive state without re-rendering .<br />
 				<span className="text-sm">
 					<span className="theme-light:text-gray-900 theme-dark:text-white font-bold">Zero</span> re-renders,{' '}
 					<span className="theme-light:text-gray-900 theme-dark:text-white font-bold">Reactive</span> &{' '}
@@ -112,15 +112,15 @@ function InteractiveCard({ toggleMenu }: { toggleMenu: () => void }) {
 					aria-label="button"
 					onClick={toggleMenu}
 					className="accent-violet:bg-violet-500 accent-emerald:bg-emerald-500 accent-amber:bg-amber-500 w-full rounded-lg py-3 font-medium text-white hover:scale-[1.02]">
-					<span className="menu-open-true:hidden">Close Panel</span>
-					<span className="menu-open-false:hidden">Open Panel</span>
+					<span className="menu-open-false:hidden">Close Panel</span>
+					<span className="menu-open-true:hidden">Open Panel</span>
 				</button>
 			</div>
 
 			{/* Sliding Panel */}
-			<div className="menu-open-true:max-h-[160px] menu-open-false:max-h-0 overflow-hidden">
+			<div className="menu-open-true:max-h-[80px] menu-open-false:max-h-0 overflow-hidden">
 				<div className="theme-dark:bg-gray-700 theme-light:bg-white border-t border-gray-200 p-6 transition-all duration-0!">
-					<p className="theme-dark:text-gray-300 theme-light:text-gray-600">✨ This panel slides open without re-rendering!</p>
+					<p className="theme-dark:text-gray-300 theme-light:text-gray-600 text-center">✨ This panel slides open without re-rendering!</p>
 				</div>
 			</div>
 		</div>
@@ -132,7 +132,9 @@ function StateDisplay() {
 	const ref = useRenderTracker('StateDisplay');
 
 	return (
-		<div ref={ref}>
+		<div
+			ref={ref}
+			className="max-[450px]:hidden">
 			<div className="theme-light:text-gray-500 theme-dark:text-gray-400 **:accent-violet:text-violet-500 **:accent-emerald:text-emerald-500 **:accent-amber:text-amber-500 mt-5 flex justify-center gap-4 space-y-1 text-center font-mono text-sm capitalize">
 				<div className="flex gap-1 text-nowrap **:text-nowrap">
 					theme: <span className="theme-dark:hidden">Light</span>

examples/demo/src/app/(test)/layout.tsx

@@ -1,9 +1,10 @@
+import { domAnimation, LazyMotion } from 'motion/react';
 import { RenderTracker } from './ReactTracker';
 
 const layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 	return (
 		<div className="relative py-10">
-			{children}
+			<LazyMotion features={domAnimation}>{children}</LazyMotion>
 			<RenderTracker />
 			<div className="fixed right-0 bottom-0 z-10 h-fit w-full rounded-lg bg-white/80 px-4 py-2 ring-1 ring-black/5 backdrop-blur-sm md:bg-white/20">
 				<div className="pb-2 text-sm text-blue-500">(Layout.tsx) Global UI State Variables</div>

examples/demo/src/app/(test)/page.tsx

@@ -2,7 +2,7 @@
 
 import { Icon } from '@/app/components/Icon';
 import { TestComponentWithState } from './ReactState';
-import { TestComponent } from './ZeroState';
+import { TestComponentZero } from './ZeroState';
 import { useUI } from '@austinserb/react-zero-ui';
 
 export default function Page() {
@@ -36,7 +36,7 @@ export default function Page() {
 
 					<div className="h-full w-full overflow-hidden rounded-b-lg border border-t-0 border-gray-200">
 						<div className="active-zero:translate-x-0 active-react:translate-x-[-50%] grid h-full w-[200%] grid-cols-2 items-center justify-start transition-transform duration-300">
-							<TestComponent />
+							<TestComponentZero />
 							<TestComponentWithState />
 						</div>
 					</div>

examples/demo/src/app/globals.css

@@ -7,6 +7,9 @@
 		0px 25px 25px -3.75px rgba(0, 0, 0, 0.11), 0px -5px 5px -3.75px rgba(0, 0, 0, 0.11);
 }
 
+/* * {
+	border: 1px dotted red;
+} */
 button:not(:disabled),
 [role='button']:not(:disabled) {
 	cursor: pointer;