Add axios dependency and home image grid component

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@types/firebase": "^3.2.1",
     "@types/next-auth": "^3.15.0",
+    "axios": "^1.6.7",
     "firebase": "^10.8.0",
     "gray-matter": "^4.0.3",
     "next": "14.1.0",

src/components/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Footer: React.FC = () => {
   return (
     <footer className="flex flex-col font-medium w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto my-4">

src/components/HomeImageGrid.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+
+const images = [
+    '/home-1.jpg',
+    '/home-2.jpg',
+    '/home-3.jpg',
+    '/home-4.jpg',
+    '/home-5.jpg',
+    '/home-6.jpg',
+    '/home-7.jpg',
+];
+
+const HomeImageGrid: React.FC = () => {
+    return (
+        <div className="columns-2 md:columns-3 my-2 gap-2 md:gap-4">
+            {images.map((src, index) => (
+                <div key={index} className="mb-2 md:mb-4">
+                    <img className="h-auto max-w-full rounded-lg grayscale  transition-all duration-300 ease-in-out transform hover:grayscale-0" src={src} alt="" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default HomeImageGrid;

src/components/ImageGallery.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @next/next/no-img-element */
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+interface Image {
+    urls: { regular: string; };
+}
+
+const ImageGallery: React.FC = () => {
+    const [imageData, setImageData] = useState<Image[]>([]);
+
+    const fetchImagesFromUnsplash = async () => {
+        try {
+            const response = await axios.get('https://api.unsplash.com/users/pranshu05/photos', {
+                params: {
+                    client_id: 'IpuBMtdoSBFo8bS7L1gevS7rRFBdEDN9Wp7du9QFh1A',
+                    per_page: 30,
+                },
+            });
+
+            setImageData(response.data);
+        } catch (error) {
+            console.error('Error fetching images:', error);
+        }
+    };
+
+    useEffect(() => {
+        fetchImagesFromUnsplash();
+    }, []);
+
+    return (
+        <div className="columns-2 md:columns-3 gap:2 md:gap-4">
+            {imageData.map((image, index) => (
+                <div className="mb-2 md:mb-4" key={index}>
+                    <img className='h-auto max-w-full rounded-lg grayscale transition-all duration-300 ease-in-out transform hover:grayscale-0' src={image.urls.regular} alt="" loading="lazy" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ImageGallery;

src/components/MessageList.tsx

@@ -26,7 +26,6 @@ const MessageList: React.FC = () => {
                     const data = doc.data();
                     return { id: doc.id, ...data, timestamp: data.timestamp.toDate(), };
                 }) as Message[];
-
                 setMessages(newMessages);
                 setLoading(false);
                 setError(null);
@@ -36,7 +35,6 @@ const MessageList: React.FC = () => {
                 setError('Error fetching messages. Please try again.');
             }
         });
-
         return () => unsubscribe();
     }, []);
 

src/pages/_app.tsx

@@ -5,17 +5,12 @@ import Footer from "@/components/Footer";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <>
-      <div className="min-h-dvh w-dvw p-0 m-0 text-zinc-100 flex flex-col">
-        <NavBar />
-        <div className="flex-1">
-          <Component {...pageProps} />
-        </div>
-        <Footer />
+    <div className="min-h-dvh w-dvw p-0 m-0 bg-neutral-950 text-zinc-100 flex flex-col">
+      <NavBar />
+      <div className="flex-1">
+        <Component {...pageProps} />
       </div>
-      <div className="fixed left-0 top-0 -z-10 h-dvh w-dvw">
-        <div className="absolute top-0 left-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.2)_0,rgba(0,163,255,0.12)_50%,rgba(0,163,255,0)_100%)]"></div>
-      </div>
-    </>
+      <Footer />
+    </div>
   );
 }

src/pages/gallery/index.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import ImageGallery from '../../components/ImageGallery';
+
+export const metadata: Metadata = {
+    title: 'Pranshu05 // Gallary',
+    description: 'My Gallary, feel free to explore!',
+};
+
+const ImageGalleryPage: React.FC = () => {
+    return (
+        <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
+            <div className="pb-8">
+                <h1 className="text-3xl font-bold">Gallary</h1>
+                <p>Welcome to my Gallary! Visit my <a href='https://unsplash.com/@pranshu05' target="_blank" className='link'>Unsplash Profile</a></p>
+            </div>
+            <ImageGallery />
+        </div>
+    );
+};
+
+export default ImageGalleryPage;

src/pages/index.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import { ageInYears } from '@/lib/AgeInYears';
 import { useEffect, useState } from 'react';
 import { getFormattedTime } from '@/lib/Time';
+import HomeImageGrid from '@/components/HomeImageGrid';
 
 const socialLinks = [
   { href: 'https://github.com/pranshu05', icon: <FaGithub />, text: 'GitHub' },
@@ -50,6 +51,7 @@ const Home: React.FC = () => {
           </div>
         ))}
       </div>
+      <HomeImageGrid />
     </div>
   );
 };