zero-docs/components/ui/responsive-image.tsx at mlaw/auth-docs · devagrawal09/zero-docs · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
'use client';

import Image from 'next/image';
import {FC, useState} from 'react';

type ResponsiveImageProps = {
  src: string;
  alt: string;
  width: number;
  height: number;
  caption?: string;
};

const ResponsiveImage: FC<ResponsiveImageProps> = ({
  src,
  alt,
  width,
  height,
  caption,
}) => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const handleClick = () => {
    setIsFullscreen(!isFullscreen);
  };

  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        margin: '3rem auto 4rem',
        overflow: 'hidden',
        aspectRatio: `${width} / ${height}`,
      }}
    >
      <Image
        src={src}
        alt={alt}
        layout="fill"
        objectFit="cover"
        priority
        style={{
          cursor: 'pointer',
        }}
        onClick={handleClick}
      />

      {/* Fullscreen Lightbox */}
      {isFullscreen && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100vw',
            height: '100vh',
            backgroundColor: 'rgba(0, 0, 0, 0.93)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 9999,
          }}
          onClick={handleClick}
        >
          <Image
            src={src}
            alt={alt}
            layout="intrinsic" // Intrinsic layout to allow natural sizing
            width={width}
            height={height}
            style={{
              width: '90vw',
              height: 'auto',
              maxWidth: '100%',
              maxHeight: '100%',
              objectFit: 'contain',
            }}
          />
        </div>
      )}

      {/* Caption */}
      {caption && (
        <figcaption style={{textAlign: 'center', marginTop: '1rem'}}>
          {caption}
        </figcaption>
      )}
    </div>
  );
};

export default ResponsiveImage;