blob: 92dcc304131a88d64774977d09ad25e5eabd7a53 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
'use client';
/**
* Copyright (c) Delba de Oliveira
* Source: https://github.com/delbaoliveira/website/blob/59e6f181ad75751342ceaa8931db4cbcef86b018/ui/BlurImage.tsx
*/
import { cn } from '@/lib/utils';
import NextImage from 'next/image';
import { useState } from 'react';
type ImageProps = {
imageClassName?: string;
lazy?: boolean;
} & React.ComponentProps<typeof NextImage>;
const BlurImage = (props: ImageProps) => {
const { alt, src, className, imageClassName, lazy = true, ...rest } = props;
const [isLoading, setIsLoading] = useState(true);
return (
<div
className={cn('overflow-hidden', isLoading && 'animate-pulse', className)}
>
<NextImage
className={cn(
isLoading && 'scale-[1.02] blur-xl grayscale',
imageClassName,
)}
style={{
transition: 'filter 700ms ease, scale 150ms ease',
}}
src={src}
alt={alt}
loading={lazy ? 'lazy' : undefined}
priority={!lazy}
quality={100}
onLoad={() => setIsLoading(false)}
{...rest}
/>
</div>
);
};
export { BlurImage };
|
