refactor: refine to more semantic

DaleStudy · Jun 15, 2024 · b6310b8 · b6310b8
1 parent fc42627
commit b6310b8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
@@ -7,28 +7,34 @@
   background-color: #efefef;
   max-width: 568px;
 }
-.review-img-text-container {
+.review-item blockquote,
+figure {
+  margin: 0;
+}
+.review-content {
   display: flex;
   align-items: center;
 }
-.review-img {
+.review-content figure {
   width: 104px;
   height: 104px;
   flex-shrink: 0;
   margin-right: 31px;
 }
-.review-img img {
+.review-content figure > img {
   width: 100%;
   height: 100%;
   padding-top: 7px;
   border-radius: 50%;
   background-color: #ffffff;
 }
-.review-text {
+.review-content blockquote {
   font-size: 14px;
 }
-.review-name {
+.review-footer {
   width: 100%;
   margin-top: 14px;
+}
+.review-footer figcaption {
   text-align: right;
 }
diff --git a/components/review-item/review-item.js b/components/review-item/review-item.js
@@ -26,15 +26,17 @@ class ReviewItem extends HTMLElement {
     try {
       this.shadowRoot.innerHTML = `
         <link rel="stylesheet" href="components/review-item/review-item.css">
-        <div class="review-item">
-          <div class="review-img-text-container">
-            <div class="review-img">
+        <article class="review-item">
+          <section class="review-content">
+            <figure>
               <img src="${this.img}" alt="Reviewer">
-            </div>
-            <div class="review-text">${this.text}</div>
-          </div>
-          <div class="review-name">${this.name}</div>
-        </div>
+            </figure>
+            <blockquote>${this.text}</blockquote>
+          </section>
+          <footer class="review-footer">
+            <figcaption>${this.name}</figcaption>
+          </footer>
+        </article>
       `;
     } catch (error) {
       // log any rendering errors.