all frontend done

Author: pradeepyd

frontend/package-lock.json

@@ -12,12 +12,14 @@
   "dependencies": {
     "@pradeep0123yadav/common": "^1.0.4",
     "axios": "^1.7.9",
+    "draft-js": "^0.11.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/draft-js": "^0.11.18",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

frontend/package.json

@@ -5,6 +5,7 @@ import { Signup } from './pages/Signup'
 import { Signin } from './pages/Signin'
 import { Blog } from './pages/Blog'
 import { Blogs } from './pages/Blogs'
+import { Publish} from './pages/Publish'
 function App() {
 
 
@@ -13,9 +14,11 @@ function App() {
       <BrowserRouter>
           <Routes>
             <Route path='/signup' element={<Signup/>}/>
+            <Route path='/' element={<Signup/>}/>
             <Route path='/signin' element={<Signin/>}/>
             <Route path='/blog/:id' element={<Blog/>}/>
             <Route path='/blogs' element={<Blogs/>}/>
+            <Route path='/publish' element={<Publish/>}/>
           </Routes>
       </BrowserRouter>
     </>

frontend/src/App.tsx

@@ -8,7 +8,9 @@ export const Appbar = () => {
         </Link>
         <div className="flex flex-col justify-center">
         <div>
-        <button type="button" className="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Create</button>
+        <Link to={"/publish"}>
+            <button type="button" className="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Publish</button>
+        </Link>
             <Avatar size={"big"} name={"Pradeep"}/>
         </div>
         </div>

frontend/src/components/Appbar.tsx

@@ -10,7 +10,7 @@ export const SpecificBlog = ({ blog }: { blog: BlogInputs | undefined }) => {
     <div>
       <Appbar />
       <div className="grid grid-cols-12 px-20 mt-20">
-        <div className=" col-span-8">
+        <div className=" col-span-8 pr-4 m-2">
           <div className="text-5xl font-extrabold">{blog.title}</div>
           <div className="text-slate-500 pt-3">Posted on 10 Jan 2025</div>
           <div className="pt-4 text-lg">{blog.content}</div>

frontend/src/components/SpecificBlog.tsx

@@ -0,0 +1,19 @@
+import { ChangeEvent } from "react";
+
+export const Texteditor = ({onChange}:{onChange:(e:ChangeEvent<HTMLTextAreaElement>) => void}) => {
+  return (
+    <div>
+      <div className=" mb-4 border bg-gray-50 rounded-lg mt-4">
+        <div className="rounded-t-lg ">
+          <textarea
+          onChange={onChange}
+            rows={8}
+            className="w-full bg-gray-100 px-0 text-sm text-gray-900 focus:ring-0 dark:placeholder-gray-400"
+            placeholder="Write your description..."
+            required
+          ></textarea>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/Texteditor.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useEffect, useState } from "react"
+import { useEffect, useState  } from "react"
 import { BACKEND_URL } from "../config";
 
  export interface BlogInputs{
@@ -51,4 +51,4 @@ export const useBlogs = () => {
         loading,
         blogs
     }
-}
+}