Disclose Image

1/* eslint-disable @next/next/no-img-element */
2"use client";
3import { ImgHTMLAttributes, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6export default function DiscloseImage({
7  className,
8  doorClassName,
9  vertical = false,
10  ...props
11}: ImgHTMLAttributes<HTMLImageElement> & {
12  doorClassName?: string;
13  vertical?: boolean;
14}) {
15  const [imageLoaded, setImageLoaded] = useState(false);
16  const baseClassName =
17    "ease-slow duration-mid absolute bg-sky-500 transition-all animate-out fill-mode-forwards";
18 
19  const { alt, ...imgProps } = props;
20  return (
21    <div className="relative h-64 w-52 overflow-hidden rounded-md bg-yellow-100">
22      <img
23        alt={alt || "Disclose image"}
24        onLoad={() => setImageLoaded(true)}
25        {...imgProps}
26        className={cn("h-full w-full object-cover", className)}
27      />
28 
29      {imageLoaded && (
30        <>
31          <div
32            className={cn(baseClassName, doorClassName, {
33              "top-0 h-1/2 w-full slide-out-to-top-full": vertical,
34              "bottom-0 left-0 top-0 w-1/2 slide-out-to-left-full": !vertical,
35            })}
36          />
37          <div
38            className={cn(baseClassName, doorClassName, {
39              "bottom-0 h-1/2 w-full slide-out-to-bottom-full": vertical,
40              "bottom-0 right-0 top-0 w-1/2 slide-out-to-right-full": !vertical,
41            })}
42          />
43        </>
44      )}
45    </div>
46  );
47}