UI changes and enhancement

client/public/index.html

@@ -39,6 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
+    <script src="https://unpkg.com/flowbite@1.4.5/dist/flowbite.js"></script>
   </body>
 </html>

client/src/Components/EventCard.jsx

@@ -1,14 +1,16 @@
 import React from "react";
 
+import { Link } from "react-router-dom";
+import { Image } from "semantic-ui-react";
 export const EventCard = ({ name, desc }) => {
   return (
     <div
       class="max-w-sm  bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 hover:scale-45"
       style={{ width: "400px" }}
     >
       <a href="#">
-        <img
-          class="rounded-t-lg"
+        <Image
+          // class="rounded-t-lg"
           src="https://flowbite.com/docs/images/blog/image-1.jpg"
           alt=""
         />
@@ -19,12 +21,15 @@ export const EventCard = ({ name, desc }) => {
             {name}
           </h5>
         </a>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">{desc}</p>
-        <a
-          href="#"
+        <p class="truncate mb-3 font-normal text-gray-500 dark:text-gray-400">
+          {desc}
+        </p>
+
+        <Link
+          to="/event/123"
           class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         >
-          Read more
+          view
           <svg
             aria-hidden="true"
             class="w-4 h-4 ml-2 -mr-1"
@@ -38,7 +43,7 @@ export const EventCard = ({ name, desc }) => {
               clip-rule="evenodd"
             ></path>
           </svg>
-        </a>
+        </Link>
       </div>
     </div>
   );

client/src/Components/EventList.jsx

@@ -200,7 +200,7 @@ export const EventList = () => {
           </Button>
         </Modal.Actions>
       </Modal>
-      <div className="flex gap-4 my-6 flex-wrap justify-start">
+      <div className="flex gap-4 my-6 flex-wrap justify-center">
         {currentList.map((data, idx) => {
           return <EventCard key={idx} name={data.name} desc={data.desc} />;
         })}

client/src/Components/Navbar.jsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import { Fragment } from "react";
 import { LogOutUser } from "../api/auth";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import { useDispatch } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import logo from "../Images/Bill.png";
+import { Modal } from "flowbite-react";
+import { Button } from "semantic-ui-react";
+import EventForm from "./EventForm";
 const user = {
   name: "John Doe",
   email: "[email protected]",
@@ -29,9 +32,11 @@ function classNames(...classes) {
 export const Navbar = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const [flag, setFlag] = useState(false);
   const LogoutHandler = async () => {
     await LogOutUser(dispatch, navigate);
   };
+  const [openForm, setOpenForm] = useState(false);
   return (
     <Disclosure as="nav" className="bg-gray-800">
       {({ open }) => (
@@ -102,6 +107,9 @@ export const Navbar = () => {
                                   if (item.name === "Sign out") {
                                     LogoutHandler();
                                   }
+                                  if (item.name === "Your Profile") {
+                                    setOpenForm(true);
+                                  }
                                 }}
                                 className={classNames(
                                   active ? "bg-gray-100" : "",
@@ -186,6 +194,9 @@ export const Navbar = () => {
                       if (item.name === "Sign out") {
                         LogoutHandler();
                       }
+                      if (item.name === "Your Profile") {
+                        setOpenForm(true);
+                      }
                     }}
                     className="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
                   >
@@ -195,6 +206,27 @@ export const Navbar = () => {
               </div>
             </div>
           </Disclosure.Panel>
+
+          <Modal
+            // closeOnDimmerClick={false}
+            size={"large"}
+            // open={openForm}
+            popup={true}
+            show={openForm}
+            size="6xl"
+            onClose={() => setOpenForm(false)}
+          >
+            <Modal.Header>Profile</Modal.Header>
+
+            <Modal.Body>
+              <EventForm setFlag={setFlag} setOpenForm={setOpenForm} />
+            </Modal.Body>
+            <Modal.Footer>
+              <Button negative onClick={() => setOpenForm(false)}>
+                Cancel
+              </Button>
+            </Modal.Footer>
+          </Modal>
         </>
       )}
     </Disclosure>

client/src/Components/ProfileCard.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Tabs } from "flowbite-react";
+
+const ProfileCard = () => {
+  return (
+    <>
+      <Tabs.Group aria-label="Tabs with icons" style="underline">
+        <Tabs.Item title="Profile">Profile content</Tabs.Item>
+        <Tabs.Item active={true} title="Dashboard">
+          Dashboard content
+        </Tabs.Item>
+        <Tabs.Item title="Settings">Settings content</Tabs.Item>
+        <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
+        <Tabs.Item disabled={true} title="Disabled">
+          Disabled content
+        </Tabs.Item>
+      </Tabs.Group>
+    </>
+  );
+};
+
+export default ProfileCard;

server/README.md

@@ -0,0 +1 @@
+# Backend of the application