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
32 lines
828 B
TypeScript
32 lines
828 B
TypeScript
import Image from 'next/image';
|
|
import { useId } from 'react';
|
|
|
|
export default function FeatureImage({
|
|
src,
|
|
width,
|
|
height,
|
|
alt,
|
|
}: {
|
|
src: string;
|
|
width: number | `${number}`;
|
|
height: number | `${number}`;
|
|
alt: string;
|
|
}) {
|
|
const id = useId();
|
|
const delay = (id.charCodeAt(1) % 5) + 0.5;
|
|
|
|
return (
|
|
<div className="relative rounded-[18px] p-px shadow-2xl">
|
|
<div
|
|
className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
|
|
style={{
|
|
WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
|
|
animationDelay: `${delay}s`,
|
|
}}
|
|
></div>
|
|
|
|
<Image className="relative z-10 block rounded-2xl" src={src} alt={alt} width={width} height={height} />
|
|
</div>
|
|
);
|
|
}
|