has errors need to be fixed

components/Block/BlockAdmin.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react'
+import Modal from 'react-modal'
+import axios from 'axios'
+import BlockCardAdmin from './BlockCard/BlockCardAdmin'
+import styles from './Block.module.css'
+
+interface EventData {
+  id: string
+  title: string
+  description: string
+  start_month: string
+  url: string
+  image_url: string
+}
+
+interface Props {
+  title: string
+  blocksData: EventData[]
+  onEdit: (editedData: EventData) => void
+  onDelete: (id: string) => void
+}
+
+export default function BlockAdmin({
+  title,
+  blocksData,
+  onEdit,
+  onDelete,
+}: Props) {
+  const [eventData, setEventData] = useState<EventData>({
+    id: '',
+    title: '',
+    description: '',
+    start_month: 'January',
+    url: '',
+    image_url: '',
+  })
+
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [editingEvent, setEditingEvent] = useState<EventData | null>(null)
+
+  useEffect(() => {
+    if (editingEvent) {
+      setEventData(editingEvent)
+    }
+  }, [editingEvent])
+
+  const handleInputChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => {
+    const { name, value } = e.target
+    setEventData(prevData => ({
+      ...prevData,
+      [name]: value,
+    }))
+  }
+
+  const handleEdit = (editedData: EventData) => {
+    setEditingEvent(editedData)
+    setModalIsOpen(true)
+  }
+
+  const handleDelete = async (eventId: string) => {
+    try {
+      await axios.delete(`/api/events/${eventId}`)
+      fetchEvents()
+    } catch (error) {
+      console.error('Error deleting event:', error)
+    }
+  }
+
+  const handleAddEvent = async () => {
+    try {
+      if (editingEvent) {
+        const updatedEvent = await axios.put(`/api/events/${editingEvent.id}`, {
+          ...eventData,
+        })
+        onEdit(updatedEvent.data)
+      } else {
+        const createdEvent = await axios.post('/api/events', eventData)
+        console.log('Event added to database:', createdEvent.data)
+      }
+      setModalIsOpen(false)
+      setEventData({
+        id: '',
+        title: '',
+        description: '',
+        start_month: 'January',
+        url: '',
+        image_url: '',
+      })
+      setEditingEvent(null)
+    } catch (error) {
+      console.error('Error adding/editing event:', error)
+    }
+  }
+
+  const fetchEvents = async () => {
+    try {
+      const response = await axios.get('/api/events')
+      setEventData(response.data)
+    } catch (error) {
+      console.error('Error fetching events:', error)
+    }
+  }
+
+  return (
+    <div id='blocksId' className={styles.blocksWrapper}>
+      <div className={`${styles.blocksMain} page-wrapper`}>
+        <div className={styles.blocksHeading}>
+          <div className={styles.text_block}>
+            <h2>{title}</h2>
+          </div>
+        </div>
+        <button
+          style={{
+            position: 'relative',
+            zIndex: 100,
+            backgroundColor: 'red',
+          }}
+          onClick={() => setModalIsOpen(true)}
+        >
+          Add Event
+        </button>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={() => setModalIsOpen(false)}
+          style={{
+            content: {
+              margin: 'auto',
+              backgroundColor: 'green',
+              maxHeight: '70%',
+              width: '70%',
+            },
+          }}
+        >
+          <h2>Add Event</h2>
+          <input
+            type='text'
+            name='title'
+            placeholder='Event Title'
+            value={eventData.title}
+            onChange={handleInputChange}
+          />
+          <textarea
+            name='description'
+            placeholder='Event Description'
+            value={eventData.description}
+            onChange={handleInputChange}
+          />
+          <select
+            name='start_month'
+            value={eventData.start_month}
+            onChange={handleInputChange}
+          >
+            <option value='January'>January</option>
+          </select>
+          <input
+            type='text'
+            name='url'
+            placeholder='Event URL'
+            value={eventData.url}
+            onChange={handleInputChange}
+          />
+          <input
+            type='text'
+            name='image_url'
+            placeholder='Image URL'
+            value={eventData.image_url}
+            onChange={handleInputChange}
+          />
+          <button onClick={handleAddEvent}>Add Event</button>
+          <button onClick={() => setModalIsOpen(false)}>Close</button>
+        </Modal>
+        <div className={styles.blocksCardWrapper}>
+          {blocksData.map((data, index) => {
+            return (
+              <BlockCardAdmin
+                data={data}
+                key={index}
+                number={index + 1}
+                leftSideImage={index % 2 === 0} // Adjust this condition
+                onEdit={handleEdit} // Pass the onEdit function
+                onDelete={handleDelete} // Pass the onDelete function
+              />
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

components/Block/BlockCard/BlockCard.tsx

@@ -24,13 +24,13 @@ export default function BlockCard({ leftSideImage, data, number }: Props) {
               <div className={styles.styleDiv}></div>
             </div>
             <div className={styles.blockName}>
-              <h1>{data.heading}</h1>
+              <h1>{data.title}</h1>
               <br />
-              <h3>{data.time}</h3>
+              <h3>{data.start_month}</h3>
             </div>
-            <div className={styles.blockInfo}>{data.content}</div>
+            <div className={styles.blockInfo}>{data.description}</div>
             <div className={styles.knowMore}>
-              <a href={data.knowMoreLink} target='_blank'>
+              <a href={data.url} target='_blank'>
                 <div>Know More</div>
                 <div className={styles.buttonImage}>
                   <Image
@@ -49,7 +49,7 @@ export default function BlockCard({ leftSideImage, data, number }: Props) {
             }`}
           >
             <div className={styles.blockImageCard}>
-              <Image src={data.image} fill alt='user provided image' />
+              <Image src={data.image_url} fill alt='user provided image' />
             </div>
           </div>
         </div>

components/Block/BlockCard/BlockCardAdmin.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import Image from 'next/image'
+import { ind_block_data } from '@/types/Block/blockCard.types'
+import styles from './BlockCard.module.css'
+
+interface Props {
+  leftSideImage: boolean
+  data: ind_block_data
+  number: number
+  onEdit: (data: ind_block_data) => void
+  onDelete: (id: string) => void
+}
+
+export default function BlockCardAdmin({
+  leftSideImage,
+  data,
+  number,
+  onEdit,
+  onDelete,
+}: Props) {
+  const handleEdit = () => {
+    onEdit(data)
+  }
+
+  const handleDelete = () => {
+    onDelete(data.id)
+  }
+
+  return (
+    <>
+      <div className={styles.blockCardWrapper}>
+        <div className={styles.blockCardMain}>
+          <div>
+            <button onClick={handleEdit} style={{ backgroundColor: 'yellow' }}>
+              Edit
+            </button>
+            <button
+              onClick={handleDelete}
+              style={{ backgroundColor: 'yellow' }}
+            >
+              Delete
+            </button>
+          </div>
+          <div
+            className={`${styles.blockInfo} ${
+              leftSideImage && styles.blockInfoLeft
+            }`}
+          >
+            <div className={styles.blockNumber}>
+              <h1>{number < 10 ? `0${number}` : number}</h1>
+              <div className={styles.styleDiv}></div>
+            </div>
+            <div className={styles.blockName}>
+              <h1>{data.title}</h1>
+              <br />
+              <h3>{data.start_month}</h3>
+            </div>
+            <div className={styles.blockInfo}>{data.description}</div>
+            <div className={styles.knowMore}>
+              <a href={data.url} target='_blank'>
+                <div>Know More</div>
+                <div className={styles.buttonImage}>
+                  <Image
+                    alt='button'
+                    src='/Events/event-button.svg'
+                    fill
+                    priority
+                  />
+                </div>
+              </a>
+            </div>
+          </div>
+          <div
+            className={`${styles.blockImageWrapper} ${
+              leftSideImage && styles.blockImageWrapperLeft
+            }`}
+          >
+            <div className={styles.blockImageCard}>
+              <Image src={data.image_url} fill alt='user provided image' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package.json

@@ -44,6 +44,7 @@
     "validator": "^13.9.0"
   },
   "devDependencies": {
+    "@types/react-modal": "^3.16.0",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.6"
   },

pages/admin.tsx

@@ -1,7 +1,6 @@
 import { useSession } from 'next-auth/react'
 import AdminMembers from '@/components/Admins/AdminMember'
 import Hero from '@/components/Hero/Hero'
-import Image from 'next/image'
 
 const admin = () => {
   const { data: session } = useSession()