oiov
42 lines
877 B
TypeScript
42 lines
877 B
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { ComponentProps } from "react";
|
|
import Image from "next/image";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function BlurImage(props: ComponentProps<typeof Image>) {
|
|
const [isLoading, setLoading] = useState(true);
|
|
|
|
return (
|
|
<Image
|
|
{...props}
|
|
alt={props.alt}
|
|
className={cn(
|
|
props.className,
|
|
"duration-500 ease-in-out",
|
|
isLoading ? "blur-sm" : "blur-0",
|
|
)}
|
|
onLoad={() => setLoading(false)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function BlurImg(props) {
|
|
const [isLoading, setLoading] = useState(true);
|
|
|
|
return (
|
|
<img
|
|
{...props}
|
|
alt={props.alt}
|
|
className={cn(
|
|
props.className,
|
|
"duration-500 ease-in-out",
|
|
isLoading ? "animate-pulse blur-md" : "blur-0",
|
|
)}
|
|
onLoad={() => setLoading(false)}
|
|
/>
|
|
);
|
|
}
|