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>
  );
-}
+}