sidebar added

SH20RAJ · Mar 23, 2024 · f526915 · f526915
1 parent 9460e44
commit f526915
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git 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
@@ -72,41 +72,57 @@ 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 />
     </>
   );
 }
 
-
 // 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>
   );
-}
+}