mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-01-26 03:14:08 +00:00
0db0e45239
- Replace `next lint` with `eslint .` (next lint removed in v16) - Migrate to ESLint flat config format - Fix React 19 purity errors in FeatureImage and TopFade components - Update components for Next.js 16 compatibility
24 lines
727 B
TypeScript
24 lines
727 B
TypeScript
'use client';
|
|
|
|
import { useSyncExternalStore } from 'react';
|
|
|
|
const calculateBrightness = () => {
|
|
if (window.scrollY > 200) return 0.5;
|
|
const amountToDecrease = (window.scrollY / 200) * 0.5;
|
|
return 1 - amountToDecrease;
|
|
};
|
|
|
|
const subscribe = (callback: () => void) => {
|
|
document.addEventListener('scroll', callback, true);
|
|
return () => document.removeEventListener('scroll', callback, true);
|
|
};
|
|
|
|
const getSnapshot = () => calculateBrightness();
|
|
const getServerSnapshot = () => 1;
|
|
|
|
export default function TopFade() {
|
|
const brightness = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
|
|
return <div className="top-fade pointer-events-none" style={{ filter: `brightness(${brightness})` }}></div>;
|
|
}
|