Merge pull request #29 from eneskaya12/enes

add react-awesome-lightbox

package.json

@@ -12,6 +12,7 @@
     "nextra": "^2.0.0-beta.5",
     "nextra-theme-blog": "^2.0.0-beta.5",
     "react": "^17.0.2",
+    "react-awesome-lightbox": "^1.8.1",
     "react-dom": "^17.0.2",
     "rss": "^1.2.2"
   },

pages/_app.js

@@ -1,8 +1,14 @@
 import 'nextra-theme-blog/style.css'
 import Head from 'next/head'
+import { MDXProvider } from '@mdx-js/react'
+import CenteredImageLightbox from './components/CenteredImageLightbox';
 
 import '../styles/main.css'
 
+const mdxComponents = {
+  CenteredImageLightbox,
+}
+
 export default function Nextra({ Component, pageProps }) {
   return (
     <>
@@ -21,7 +27,9 @@ export default function Nextra({ Component, pageProps }) {
           crossOrigin="anonymous"
         />
       </Head>
-      <Component {...pageProps} />
+      <MDXProvider components={mdxComponents}>
+        <Component {...pageProps} />
+      </MDXProvider>
     </>
   )
 }

pages/components/CenteredImageLightbox.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import Lightbox from 'react-awesome-lightbox';
+import 'react-awesome-lightbox/build/style.css';
+
+const CenteredImageLightbox = ({ src, alt, width, ...rest }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }} onClick={handleClick}>
+        <img src={src} alt={alt} width={width} {...rest} style={{ cursor: 'pointer' }} />
+      </div>
+      {isOpen && (
+        <Lightbox
+          image={src}
+          alt={alt}
+          title={alt}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+
+export default CenteredImageLightbox;