Added add photo, edit photo, edit section modal component

client/src/app/admin/gallery/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Spotlight } from '@/components/ui/Spotlight/Spotlight';
+import ImageContainer from "@/components/Admin/Gallery/ImageContainer"
+import AddPhotosForm from '@/components/Admin/Gallery/AddPhotosForm'
+import EditPhotoForm from '@/components/Admin/Gallery/EditPhotoFor'
+import AddOrEditSection from '@/components/Admin/Gallery/AddOrEditSection'
+import { IoAdd } from 'react-icons/io5';
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <section className="flex flex-col gap-6 min-h-screen max-w-7xl mt-32 mx-auto overflow-hidden bg-primary-650 antialiased">
+      {/* <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" fill={""} /> */}
+      {/* Go Back Button */}
+      <div>
+        <button
+          onClick={() => router.back()}
+          className="border-b border-transparent pb-1 text-xl text-primary-200 hover:border-primary-200"
+        >
+          ← Back
+        </button>
+      </div>
+
+      <h2 className="title Inter mb-4 mt-12 pb-1 text-center text-4xl font-extrabold md:text-5xl lg:mb-0 lg:mt-0 lg:text-left">
+        GALLERY CONTROL
+      </h2>
+      <div className="flex justify-center lg:justify-start  gap-3">
+        <Link href="#" className="cursor-pointer flex items-center gap-2 rounded-full bg-secondary-600 px-4 py-2.5 before:bg-secondary-600 md:text-xl">
+          <IoAdd className='rounded-full bg-secondary-400 p-1 box-content' /> Add Section
+        </Link>
+        <Link href="/gallery" className="cursor-pointer rounded-full bg-secondary-600 px-4 py-2.5 before:bg-secondary-600 sm:px-8 md:text-xl">
+          Preview
+        </Link>
+      </div>
+      <ImageContainer />
+
+      <AddOrEditSection />
+      <AddPhotosForm />
+      <EditPhotoForm />
+    </section>
+  );
+}

client/src/components/Admin/Gallery/AddOrEditSection.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+const AddOrEditSection = () => {
+    const handleFormSubmit = (e) => {
+        e.preventDefault()
+    }
+    return (
+        <div className="flex justify-center items-center bg-transparent">
+            <div className="bg-secondary-100 bg-opacity-20 to-gray-900 p-6 rounded-2xl shadow-lg">
+                <form className="space-y-6" onSubmit={handleFormSubmit}>
+                    <h2 className="Inter text-secondary-200 text-2xl text-center lg:text-4xl font-extrabold md:text-3xl lg:mb-0 lg:mt-0 lg:text-left">
+                        Edit Photo
+                    </h2>
+
+                    <input
+                        type="text"
+                        placeholder="Title"
+                        className="w-full rounded-full px-6 py-4 bg-secondary-500 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    />
+                    <input
+                        type="number"
+                        placeholder="Order"
+                        className="w-full rounded-full px-6 py-4 bg-secondary-500 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    />
+
+
+                    <div className="text-right">
+                        <button
+                            type="button"
+                            className="text-sm text-primary-200 hover:underline"
+                        >
+                            Add Links
+                        </button>
+                    </div>
+
+                    <div className="flex justify-end mt-4 gap-5">
+                        <button
+                            type="button"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Done
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default AddOrEditSection;

client/src/components/Admin/Gallery/AddPhotosForm.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+const AddPhotosForm = () => {
+    const handleFormSubmit = (e) =>{
+        e.preventDefault()
+    }
+    return (
+        <div className="flex justify-center items-center bg-transparent">
+            <div className="bg-secondary-100 bg-opacity-20 to-gray-900 p-6 rounded-2xl shadow-lg">
+                <form className="space-y-6" onSubmit={handleFormSubmit}>
+                <h2 className="Inter text-secondary-200 text-2xl text-center lg:text-4xl font-extrabold md:text-3xl lg:mb-0 lg:mt-0 lg:text-left">
+                    Add Photos
+                </h2>
+
+                    <input
+                        type="text"
+                        placeholder="Title"
+                        className="w-full rounded-full px-6 py-4 bg-secondary-500 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    />
+
+                    <div className="flex gap-4">
+                        <input
+                            type="text"
+                            placeholder="Type"
+                            className="w-full px-6 py-4 bg-secondary-500 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        />
+                        <input
+                            type="number"
+                            placeholder="Order Start"
+                            className="w-full px-6 py-4 bg-secondary-500 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        />
+                    </div>
+
+                    <textarea
+                        placeholder="Photo (Links):"
+                        rows="8"
+                        className="w-full px-6 py-4 bg-secondary-500 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    ></textarea>
+
+                    <div className="text-right">
+                    <button
+                        type="button"
+                        className="text-sm text-primary-200 hover:underline"
+                    >
+                        Add Links
+                    </button>
+                    </div>
+
+                    <div className="flex justify-end mt-4 gap-5">
+                        <button
+                            type="button"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Done
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default AddPhotosForm;

client/src/components/Admin/Gallery/EditPhotoFor.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+const EditPhotoForm = () => {
+    const handleFormSubmit = (e) =>{
+        e.preventDefault()
+    }
+    return (
+        <div className="flex justify-center items-center bg-transparent">
+            <div className="bg-secondary-100 bg-opacity-20 to-gray-900 p-6 rounded-2xl shadow-lg">
+                <form className="space-y-6" onSubmit={handleFormSubmit}>
+                <h2 className="Inter text-secondary-200 text-2xl text-center lg:text-4xl font-extrabold md:text-3xl lg:mb-0 lg:mt-0 lg:text-left">
+                    Edit Photo
+                </h2>
+
+                    <input
+                        type="text"
+                        placeholder="Title"
+                        className="w-full rounded-full px-6 py-4 bg-secondary-500 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    />
+
+                    <div className="flex gap-4">
+                        <input
+                            type="text"
+                            placeholder="Type"
+                            className="w-full px-6 py-4 bg-secondary-500 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        />
+                        <input
+                            type="number"
+                            placeholder="Order"
+                            className="w-full px-6 py-4 bg-secondary-500 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        />
+                    </div>
+
+
+                    <div className="text-right">
+                    <button
+                        type="button"
+                        className="text-sm text-primary-200 hover:underline"
+                    >
+                        Add Links
+                    </button>
+                    </div>
+
+                    <div className="flex justify-end mt-4 gap-5">
+                        <button
+                            type="button"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="px-6 py-2 bg-secondary-500 rounded-full text-white hover:bg-primary-400 focus:outline-none"
+                        >
+                            Done
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default EditPhotoForm;

client/src/components/Admin/Gallery/ImageCard.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FiEdit } from 'react-icons/fi';
+import { MdDelete } from 'react-icons/md';
+
+const ImageCard = ({image}) => {
+    return (
+        <div className="w-full rounded-2xl overflow-hidden relative" >
+            <div className="relative w-full h-full group">
+              <img
+                src={image}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+              <div className="top-2 right-2 z-10 absolute flex items-center gap-2 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-300">
+                <button className="pointer-events-auto">
+                  <FiEdit className="text-1xl" />
+                </button>
+                <button className="pointer-events-auto">
+                  <MdDelete className="text-2xl text-red-600" />
+                </button>
+              </div>
+            </div>
+          </div>
+    );
+};
+
+export default ImageCard;

client/src/components/Admin/Gallery/ImageContainer.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ImageCard from '@/components/Admin/Gallery/ImageCard'
+import { MdDelete } from 'react-icons/md';
+import { FiEdit } from 'react-icons/fi';
+import { IoAdd } from 'react-icons/io5';
+import Link from 'next/link';
+const ImageContainer = () => {
+
+  const images = ["https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg","https://aaastriping.ca/wp-content/uploads/2017/01/temp-image-300x224.jpg"]; // temp images for testing
+
+    return (
+        <div className='flex flex-col gap-6 my-10 px-[2%]'>
+            <div className="flex items-center justify-between ">
+                <div className='flex gap-4 items-center'>
+                    <h2 className="Inter text-2xl text-center lg:text-4xl font-extrabold md:text-3xl lg:mb-0 lg:mt-0 lg:text-left">
+                        Champions
+                    </h2>
+                    <button className='shadow-md'>
+                        <FiEdit className='text-2xl' />
+                    </button>
+                    <button className='shadow-md'>
+                        <MdDelete className='text-3xl text-red-600' />
+                    </button>
+                </div>
+
+
+                <Link href="#" className="cursor-pointer flex items-center gap-2 rounded-full md:text-xl">
+                    <IoAdd className='rounded-full bg-secondary-400 p-1 box-content' /> Add Photo
+                </Link>
+
+
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+                {images.map((image, key) => <ImageCard image={image} key={key} />)}
+            </div>
+        </div>
+    );
+};
+
+export default ImageContainer;