From f52691563801c76e6ea0a49a5e202083114d1ca8 Mon Sep 17 00:00:00 2001
From: Sh Raj <shaswatraj3@gmail.com>
Date: Sat, 23 Mar 2024 15:30:19 +0000
Subject: [PATCH] sidebar added

---
 src/app/globals.css |  8 +++++---
 src/app/page.js     | 38 +++++++++++++++++++++++++++-----------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c58ca21..fbdc880 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -114,7 +114,7 @@ main {
   position: static;
   margin: 10px;
   border: 2px solid #dcdadc;
-  max-width: 59%;
+  /* max-width: 59%; */
   padding: 20px;
   border-radius: 10px;
   margin: 80px;
@@ -277,8 +277,10 @@ footer {
 }
 
 .container {
-  display: flex;
-  width: 100%;
+  display: flex !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
 }
 
 .post {
diff --git a/src/app/page.js b/src/app/page.js
index 0f5347e..16364fc 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -72,23 +72,32 @@ export default function ArticlesPage() {
       <title>DevArt - Programming Related Articles</title>
 
       <main className="postscontainer">
-        <h1 className="rounded-[12px] m-10 text-xl shadow-2xl p-5">Latest Posts</h1>
+        <h1 className="rounded-[12px] m-10 text-xl shadow-2xl p-5">
+          Latest Posts
+        </h1>
         <div className="container">
           <div className="latestposts">
             {filteredArticles.map((article) => (
               <ArticleCard key={article.id} article={article} />
             ))}
           </div>
-          <div className="sidebar">
-          Hii
-        </div>
+          <div class="post">
+            <div class="usercard">
+              <img src="http://github.com/sh20raj.png" alt="" />
+              <div class="username">
+                <a href="http://github.com/sh20raj">
+                  <span class="tomato">@</span>SH20RAJ
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
-        
       </main>
       {isLoading && (
         <div className="text-center mt-8">
-          <button class="btn" id="load_more" onclick="getMorePosts()">Loading...
-            </button>
+          <button class="btn" id="load_more" onclick="getMorePosts()">
+            Loading...
+          </button>
         </div>
       )}
       <Footer />
@@ -96,17 +105,24 @@ export default function ArticlesPage() {
   );
 }
 
-
 // Child component to display article card
 function ArticleCard({ article }) {
   return (
     <div className="card rounded-[12px] m-10 text-xl shadow-2xl p-5">
       <Link href={`${article.path}`}>
-        <img src={article.social_image || "https://samples-files.com/samples/Images/jpg/1920-1080-sample.jpg"} alt="Image" />
+        <img
+          src={
+            article.social_image ||
+            "https://samples-files.com/samples/Images/jpg/1920-1080-sample.jpg"
+          }
+          alt="Image"
+        />
         <div className="card-title">{article.title}</div>
         <div className="line"></div>
-        <p className="text-gray-500 small mb-4">{article.tag_list.join(", ")}</p>
+        <p className="text-gray-500 small mb-4">
+          {article.tag_list.join(", ")}
+        </p>
       </Link>{" "}
     </div>
   );
-}
\ No newline at end of file
+}