From 104551cac8e1c2300d8ac01301ef66e6b8a64d91 Mon Sep 17 00:00:00 2001
From: diegoromemora27-creator <diegoromemora27@gmail.com>
Date: Sat, 25 Apr 2026 01:25:35 +0000
Subject: [PATCH 1/2] adding changes

---
 .../app/components/Comment/Comment.module.css | 47 ++++++++++++++++++
 nextprops/app/components/Post/Post.module.css | 48 +++++++++++--------
 nextprops/app/page.tsx                        |  4 +-
 3 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/nextprops/app/components/Comment/Comment.module.css b/nextprops/app/components/Comment/Comment.module.css
index e69de29..05bd149 100644
--- a/nextprops/app/components/Comment/Comment.module.css
+++ b/nextprops/app/components/Comment/Comment.module.css
@@ -0,0 +1,47 @@
+.card {
+  background: #f0f2f5;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 0;
+  margin-left: 8px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  box-shadow: none;
+  transition: background-color 0.2s ease;
+}
+
+.card:hover {
+  background-color: #e4e6eb;
+}
+
+.postId {
+  display: block;
+  margin: 0;
+  padding: 8px 12px 4px 12px;
+  color: #65676b;
+  font-size: 11px;
+  font-weight: 500;
+  border-bottom: none;
+  background-color: transparent;
+}
+
+.title {
+  margin: 0;
+  padding: 4px 12px 4px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #050505;
+  line-height: 1.4;
+}
+
+.body {
+  margin: 0;
+  padding: 4px 12px 8px 12px;
+  color: #454f5b;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.userId {
+  display: none;
+}
diff --git a/nextprops/app/components/Post/Post.module.css b/nextprops/app/components/Post/Post.module.css
index 62a209a..f769138 100644
--- a/nextprops/app/components/Post/Post.module.css
+++ b/nextprops/app/components/Post/Post.module.css
@@ -1,43 +1,51 @@
 .card {
   background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  padding: 20px;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 0;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease;
 }
 
 .card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .postId {
-  margin-bottom: 8px;
-  color: #6b7280;
-  font-size: 13px;
+  display: block;
+  margin: 0;
+  padding: 12px 16px 8px 16px;
+  color: #65676b;
+  font-size: 12px;
   font-weight: 500;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
+  background-color: #f0f2f5;
+  border-bottom: 1px solid #e5e7eb;
 }
 
 .title {
-  margin: 0 0 10px;
-  font-size: 18px;
+  margin: 0;
+  padding: 16px 16px 8px 16px;
+  font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
-  line-height: 1.3;
+  color: #050505;
+  line-height: 1.4;
 }
 
 .body {
   margin: 0;
-  color: #4b5563;
+  padding: 8px 16px 16px 16px;
+  color: #454f5b;
   font-size: 15px;
-  line-height: 1.55;
+  line-height: 1.5;
 }
 
 .userId {
-  margin-top: 14px;
+  display: block;
+  padding: 8px 16px;
   font-size: 12px;
-  color: #9ca3af;
-  text-align: right;
+  color: #65676b;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f0f2f5;
+  text-align: left;
 }
diff --git a/nextprops/app/page.tsx b/nextprops/app/page.tsx
index 815645a..d6f72e1 100644
--- a/nextprops/app/page.tsx
+++ b/nextprops/app/page.tsx
@@ -143,7 +143,6 @@ export default async function Home() {
       </section>
 
       <section>
-        <h3>2) Forma de renderizar mas de 1</h3>
         <div className="post-list">
           {posts.slice(0, 3).map((post) => (
             <Post
@@ -153,7 +152,8 @@ export default async function Home() {
               title={post.title}
               body={post.body}
             />
-          ))}
+          ))} 
+          
 
           
         </div>

From f5c46f2d2d91a326019d332e91a06b1b7be361d2 Mon Sep 17 00:00:00 2001
From: diegoromemora27-creator <diegoromemora27@gmail.com>
Date: Sat, 25 Apr 2026 01:30:16 +0000
Subject: [PATCH 2/2] adding changes

---
 nextprops/app/page.tsx | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/nextprops/app/page.tsx b/nextprops/app/page.tsx
index d6f72e1..b2e30e2 100644
--- a/nextprops/app/page.tsx
+++ b/nextprops/app/page.tsx
@@ -126,22 +126,6 @@ export default async function Home() {
 
   return (
     <main className="container">
-      <h1>Practica de Props + Plantilla</h1>
-
-      <section>
-        <h3>1) Renderizar solo 1 post</h3>
-        {firstPost ? (
-          <Post
-            userId={firstPost.userId}
-            id={firstPost.id}
-            title={firstPost.title}
-            body={firstPost.body}
-          />
-        ) : (
-          <p>No hay posts.</p>
-        )}
-      </section>
-
       <section>
         <div className="post-list">
           {posts.slice(0, 3).map((post) => (
@@ -154,8 +138,6 @@ export default async function Home() {
             />
           ))} 
           
-
-          
         </div>
       </section>
     </main>