Added a new page Blogs so it can directed to a new page for better seo

Author: siddharthmohite

app/routes/blogs.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react"
+import "./styles/Blogs.scss"
+import { useSearchParams } from "@remix-run/react";
+
+export default function blogs() {
+    const [searchParams] = useSearchParams();
+    const blogid = searchParams.get("blogid");
+    const [selectedBlogId, setSelectedBlogId] = useState<number | null>(null);
+
+    useEffect(() => {
+        if (blogid) {
+            const parsedBlogId = Number(blogid);
+            if (!isNaN(parsedBlogId)) {
+                setSelectedBlogId(parsedBlogId);
+            } else {
+                setSelectedBlogId(null);
+            }
+        }
+    }, [blogid]);
+
+    const BlogContent = [
+        {id: 1, title:"Blog 1", content: "This is the content of blog 1", img:"/ragvec.png"},
+
+    ]
+    return(
+        <div className="blogs">
+            <h1>this is a blogs page</h1>
+        </div>    
+
+    )
+
+
+};

app/routes/components/Blog.jsx

@@ -1,8 +1,12 @@
 import { useState } from 'react';
+import { useNavigate } from "@remix-run/react";
 import '../styles/Blog.scss';
 
+
 export default function Blog({onClose}) {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [selectedBlogId, setSelectedBlogId] = useState(null);
+    const navigate = useNavigate(); 
 
     const blogs =[
 
@@ -15,7 +19,11 @@ export default function Blog({onClose}) {
     const handleButtonClose = () =>
         {
             onClose();
-        };    
+        };
+    const handleSelectedBlogId = (id) =>{
+        setSelectedBlogId(id);
+        navigate(`/blogs?blogid=${id}`);
+    }        
   return (
     <div className="container">
         <div className="sidebar">
@@ -56,7 +64,9 @@ export default function Blog({onClose}) {
                         </div>
                         <div className="blog-footer">
                             <span className="blog-date">{blog.date}</span>
-                            <button className="blog-read-more">Read More</button>
+                            <button 
+                            onClick={() => handleSelectedBlogId(blog.blogid)}
+                            className="blog-read-more">Read More</button>
                         </div>
                     </div>    
                 </div>

app/routes/styles/Blogs.scss

@@ -0,0 +1,8 @@
+.blogs{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    width: 70vw;
+    height: 90vh;
+}