miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Benjamin Cabanes 2024-12-06 14:09:46 -05:00 committed by GitHub
parent d23350fbc0
commit d8d74da9fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 2 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
nx-dev/ui-home/src/lib/hero.tsx
View File

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