From 22117e1d842641433dad1be30fc91a0c96af79ec Mon Sep 17 00:00:00 2001
From: Anderson Vallejo <vallejoanderson@gmail.com>
Date: Tue, 15 Mar 2022 17:11:45 -0500
Subject: [PATCH 1/3] feat: personitem comp

---
 src/components/PersonItem.js | 37 ++++++++++++++++++++++++++++++++++++
 src/pages/people.js          | 27 ++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PersonItem.js

diff --git a/src/components/PersonItem.js b/src/components/PersonItem.js
new file mode 100644
index 0000000..fac70a0
--- /dev/null
+++ b/src/components/PersonItem.js
@@ -0,0 +1,37 @@
+import { html, css, LitElement } from "lit";
+
+export class PersonItem extends LitElement {
+  static get styles() {
+    return css`
+			div {
+				text-align: center;
+				border: 1px solid white;
+				border-radius: 5px;
+				padding: 10px;
+			}
+			span {
+				8px;
+			}
+		`;
+  }
+  static get properties() {
+    return {
+      val: { type: Object },
+    };
+  }
+
+  render() {
+    return html`
+      <div>
+        <h3>${this.val.name}</h3>
+        <p>Skin color: ${this.val.skin_color}</p>
+        <p>Birth of year: ${this.val.birth_year}</p>
+        <p>Number of films: ${this.val.films.length}</p>
+        <span>Gender: ${this.val.gender}</span>
+        <p></p>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("person-item", PersonItem);
diff --git a/src/pages/people.js b/src/pages/people.js
index 8bd47b5..08ff4a6 100644
--- a/src/pages/people.js
+++ b/src/pages/people.js
@@ -1,8 +1,24 @@
-import { html, LitElement } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+import "/components/PersonItem.js";
 import { fetchPeople } from "/api.js";
 
 export class PagePeople extends LitElement {
+  static get styles() {
+    return css`
+      div {
+        display: grid;
+        grid-wrap: wrap;
+        gap: 15px;
+        justify-content: center;
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+      h2 {
+        text-align: center;
+      }
+    `;
+  }
+
   static properties = {
     _people: { state: true, type: Array },
     _loading: { state: true, type: Boolean },
@@ -35,11 +51,14 @@ export class PagePeople extends LitElement {
       <h2>People</h2>
       ${this._loading ? html`<p>Loading...</p>` : null}
       ${this._error ? html`<p>${this._error}</p>` : null}
-      <ul>
-        ${this._people.map((person) => html`<li>${person.name}</li>`)}
-      </ul>
+      <div>
+        ${this._people.map(
+          (person) => html`<person-item .val=${person}></person-item>`
+        )}
+      </div>
     `;
   }
 }
 
+// ${this._people.map((person) => html`<li>${person.name}</li>`)}
 customElement("page-people")(PagePeople);

From 32d978f3ca69c0b7ce45d5177593d59d79363713 Mon Sep 17 00:00:00 2001
From: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com>
Date: Fri, 8 Apr 2022 10:31:45 -0500
Subject: [PATCH 2/3] fix: incorrect declarations

Co-authored-by: David Brito <39559632+davbrito@users.noreply.github.com>
---
 src/pages/people.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/people.js b/src/pages/people.js
index 08ff4a6..0df801f 100644
--- a/src/pages/people.js
+++ b/src/pages/people.js
@@ -6,12 +6,14 @@ import { fetchPeople } from "/api.js";
 export class PagePeople extends LitElement {
   static get styles() {
     return css`
-      div {
+      ul {
         display: grid;
-        grid-wrap: wrap;
         gap: 15px;
         justify-content: center;
         grid-template-columns: 1fr 1fr 1fr;
+        list-style: none;
+        padding-left: 0;
+        margin: 0;
       }
       h2 {
         text-align: center;
@@ -51,14 +53,13 @@ export class PagePeople extends LitElement {
       <h2>People</h2>
       ${this._loading ? html`<p>Loading...</p>` : null}
       ${this._error ? html`<p>${this._error}</p>` : null}
-      <div>
+      <ul>
         ${this._people.map(
-          (person) => html`<person-item .val=${person}></person-item>`
+          (person) => html`<li><person-item .val=${person}></person-item></li>`
         )}
-      </div>
+      </ul>
     `;
   }
 }
 
-// ${this._people.map((person) => html`<li>${person.name}</li>`)}
 customElement("page-people")(PagePeople);

From 554d68ace38209096a20d241b74bc2ddb2fe8522 Mon Sep 17 00:00:00 2001
From: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com>
Date: Fri, 8 Apr 2022 10:32:36 -0500
Subject: [PATCH 3/3] fix: typo

---
 src/components/PersonItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PersonItem.js b/src/components/PersonItem.js
index fac70a0..8d1bdc5 100644
--- a/src/components/PersonItem.js
+++ b/src/components/PersonItem.js
@@ -10,7 +10,7 @@ export class PersonItem extends LitElement {
 				padding: 10px;
 			}
 			span {
-				8px;
+				font-size: 8px;
 			}
 		`;
   }