docs(nx-dev): simplify Hero component by removing ShaderGradient (#29241

) This commit removes the ShaderGradientElement and its associated functionality from the Hero component, reducing complexity and dependencies. The return type of the Hero component is also updated for consistency. These changes lead to a more streamlined codebase with potentially fewer runtime considerations and increase client compatibility.
nrwl · Dec 6, 2024 · d8d74da · d8d74da
1 parent d23350f
commit d8d74da
Showing 1 changed file with 2 additions and 146 deletions.
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
@@ -1,26 +1,11 @@
 'use client';
 import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
-import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
-import { BlurFade, usePrefersReducedMotion } from '@nx/nx-dev/ui-animations';
-import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
-import { useState } from 'react';
-import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
 import { RustIcon, TypeScriptIcon } from '@nx/nx-dev/ui-icons';
+import { ReactElement } from 'react';
 
-export function Hero(): JSX.Element {
+export function Hero(): ReactElement {
   return (
     <div className="mx-auto h-screen w-full max-w-7xl px-6 lg:px-8">
-      <div className="hidden lg:block">
-        <ShaderGradientElement />
-      </div>
-      <div className="absolute left-0 right-0 -z-10 mx-auto flex h-full max-h-screen w-full flex-row justify-between border-b border-dashed border-slate-200/30 px-6 lg:h-full lg:max-w-7xl lg:px-0 dark:border-slate-800/40">
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-      </div>
       <div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
         <div className="container">
           <SectionHeading as="h1" variant="display" data-cy="primary-heading">
@@ -91,132 +76,3 @@ export function Hero(): JSX.Element {
     </div>
   );
 }
-
-function ShaderGradientElement() {
-  const [theme] = useTheme();
-  const [displayTheme, setDisplayTheme] = useState<Theme>('system');
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
-
-    function handleChange(): void {
-      if (theme === 'system') {
-        setDisplayTheme(matchMedia.matches ? 'dark' : 'light');
-      } else {
-        setDisplayTheme(theme === 'dark' ? 'dark' : 'light');
-      }
-    }
-
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener('change', handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener('change', handleChange);
-      }
-    };
-  }, [theme]);
-
-  if (prefersReducedMotion) {
-    return;
-  }
-
-  if (displayTheme === 'dark')
-    return (
-      <BlurFade
-        delay={1}
-        duration={1.8}
-        className="absolute left-0 -z-10 w-full"
-      >
-        <div className="h-screen w-full overflow-hidden">
-          <ShaderGradientCanvas
-            pointerEvents="none"
-            eventPrefix="client"
-            fov={45}
-            pixelDensity={1}
-            className="pointer-events-none"
-          >
-            <ShaderGradient
-              brightness={4}
-              cDistance={5}
-              color1="#251B36"
-              color2="#020617"
-              color3="#1F1C3A"
-              frameRate={10}
-              grain="off"
-              lightType="3d"
-              positionX={0}
-              positionY={1.8}
-              positionZ={0}
-              range="enabled"
-              rangeEnd={40}
-              rangeStart={0}
-              reflection={0.1}
-              rotationX={0}
-              rotationY={0}
-              rotationZ={-90}
-              shader="defaults"
-              type="waterPlane"
-              uDensity={1}
-              uFrequency={5.5}
-              uSpeed={0.1}
-              uStrength={3}
-              uTime={0.2}
-            />
-          </ShaderGradientCanvas>
-          <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-        </div>
-      </BlurFade>
-    );
-  return (
-    <BlurFade delay={1} duration={1.8} className="absolute left-0 -z-10 w-full">
-      <div className="h-screen w-full overflow-hidden">
-        <ShaderGradientCanvas
-          pointerEvents="none"
-          eventPrefix="client"
-          fov={45}
-          pixelDensity={1}
-          className="pointer-events-none"
-        >
-          <ShaderGradient
-            brightness={4}
-            cDistance={5}
-            color1="#F4F2FE"
-            color2="#F7F7FF"
-            color3="#FFFFFF"
-            frameRate={10}
-            grain="off"
-            lightType="3d"
-            positionX={0}
-            positionY={1.8}
-            positionZ={0}
-            range="enabled"
-            rangeEnd={40}
-            rangeStart={0}
-            reflection={0.1}
-            rotationX={0}
-            rotationY={0}
-            rotationZ={-90}
-            shader="defaults"
-            type="waterPlane"
-            uDensity={1}
-            uFrequency={5.5}
-            uSpeed={0.1}
-            uStrength={3}
-            uTime={0.2}
-          />
-        </ShaderGradientCanvas>
-        <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-      </div>
-    </BlurFade>
-  );
-}