From 8d2358fbd9b193fbc4240e6cf970237641a3a473 Mon Sep 17 00:00:00 2001
From: Manik Maity <manikmaity156@gmail.com>
Date: Thu, 7 Nov 2024 12:29:11 +0530
Subject: [PATCH] Added add poll form

---
 frontend/src/App.jsx                          |  2 +
 .../components/PollTableRow/PollTableRow.jsx  |  2 +-
 frontend/src/pages/CreatePollForm.jsx         | 67 +++++++++++++++++++
 frontend/src/pages/Dashboard.jsx              |  6 +-
 frontend/src/pages/Home.jsx                   |  2 +-
 5 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/CreatePollForm.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d81d42a..2f7779e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -8,6 +8,7 @@ import Register from "./pages/Register";
 import Dashboard from "./pages/Dashboard";
 import Bookmark from "./pages/Bookmark";
 import VotingPage from "./pages/VotingPage";
+import CreatePollForm from "./pages/CreatePollForm";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
         <Route path="dashboard" element={<Dashboard/>} />
         <Route path="bookmark" element={<Bookmark/>} />
         <Route path="/voting/:pollId" element={<VotingPage />} />
+        <Route path="/create" element={<CreatePollForm />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/frontend/src/components/PollTableRow/PollTableRow.jsx b/frontend/src/components/PollTableRow/PollTableRow.jsx
index 560c2b6..fc82bc6 100644
--- a/frontend/src/components/PollTableRow/PollTableRow.jsx
+++ b/frontend/src/components/PollTableRow/PollTableRow.jsx
@@ -35,7 +35,7 @@ function PollTableRow({ poll, index }) {
           )}
         </td>
         <td>
-          <div className="flex gap-2">
+          <div className="flex md:flex-row flex-col gap-2 flex-nowrap">
             <button onClick={() => setShowEditForm(true)} className="btn btn-sm btn-info flex items-center">
               <FaUserEdit className="mr-1" /> Edit
             </button>
diff --git a/frontend/src/pages/CreatePollForm.jsx b/frontend/src/pages/CreatePollForm.jsx
new file mode 100644
index 0000000..1370061
--- /dev/null
+++ b/frontend/src/pages/CreatePollForm.jsx
@@ -0,0 +1,67 @@
+// CreatePollForm.js
+import React, { useState } from "react";
+import { FaPlus, FaTrashAlt } from "react-icons/fa";
+
+function CreatePollForm() {
+  const [options, setOptions] = useState(["Option 1", "Option 2"]);
+
+  return (
+    <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
+      <div className="w-full max-w-lg bg-base-100 p-6 rounded-lg shadow-md text-white">
+        <h1 className="text-2xl font-bold mb-6 text-center">Create New Poll</h1>
+
+        {/* Poll Title */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Poll Title</label>
+          <input
+            type="text"
+            placeholder="Enter poll title"
+            className="input input-bordered w-full"
+          />
+        </div>
+
+        {/* Poll Description */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Description</label>
+          <textarea
+            placeholder="Describe the purpose of the poll"
+            className="textarea textarea-bordered w-full"
+            rows="3"
+          ></textarea>
+        </div>
+
+        {/* Poll Options */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Options</label>
+          {options.map((option, index) => (
+            <div key={index} className="flex items-center mb-2">
+              <input
+                type="text"
+                value={option}
+                placeholder={`Option ${index + 1}`}
+                className="input input-bordered w-full"
+                readOnly
+              />
+              {options.length > 2 && (
+                <button
+                  className="btn btn-error btn-circle btn-xs ml-2"
+                  title="Remove option"
+                >
+                  <FaTrashAlt />
+                </button>
+              )}
+            </div>
+          ))}
+          <button className="btn btn-primary w-full mt-2" title="Add another option">
+            <FaPlus className="mr-2" /> Add Option
+          </button>
+        </div>
+
+        {/* Submit Button */}
+        <button className="btn btn-success w-full mt-4">Create Poll</button>
+      </div>
+    </div>
+  );
+}
+
+export default CreatePollForm;
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 83e7c86..0b54c80 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -21,7 +21,7 @@ function Dashboard() {
       )}
 
       {/* User Profile Sidebar */}
-      <aside className="w-full lg:w-1/4 bg-slate-800 rounded-md m-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
+      <aside className="w-min lg:w-1/4 bg-slate-800 rounded-md m-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
         <img
           src="https://via.placeholder.com/150" // Replace with actual path
           alt="User Profile"
@@ -37,8 +37,8 @@ function Dashboard() {
       <main className="w-full lg:w-3/4 p-6">
         {/* Dashboard Header */}
         <div className="mb-6">
-          <h1 className="text-4xl font-bold text-white">Poll Dashboard</h1>
-          <p className="text-lg text-gray-300">Manage your polls, view results, and edit as needed.</p>
+          <h1 className="text-2xl md:text-4xl font-bold text-white">Poll Dashboard</h1>
+          <p className="md:text-lg text-gray-300">Manage your polls, view results, and edit as needed.</p>
         </div>
 
         {/* Add New Poll Button */}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 86dadac..13d126a 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 function Home() {
   return (
     <div className="flex bg-base-200 min-h-screen flex-col items-center text-white p-8">
-      <h1 className="text-4xl md:text-5xl font-bold mb-6">Welcome to <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span></h1>
+      <h1 className="text-4xl mt-2 md:text-5xl font-bold mb-6 text-center flex flex-col gap-2 md:block">Welcome to <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span></h1>
       <p className="text-lg text-center max-w-2xl mb-8">
         LivePoll is your platform for real-time, interactive polling. Create polls, participate in
         active discussions, and get instant feedback with live updates and visualizations. Discover