From 93b27177753d02d3ff17ef4fb8dc86b178ef0254 Mon Sep 17 00:00:00 2001
From: Sven Brodny <svenbrodny@googlemail.com>
Date: Mon, 19 Feb 2024 23:58:41 +0100
Subject: [PATCH] refactor: simple animations challenge template

---
 .../src/app/app.component.ts                  | 72 +++++++++++--------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/apps/angular/simple-animations/src/app/app.component.ts b/apps/angular/simple-animations/src/app/app.component.ts
index c194f4a..f3d710e 100644
--- a/apps/angular/simple-animations/src/app/app.component.ts
+++ b/apps/angular/simple-animations/src/app/app.component.ts
@@ -4,11 +4,24 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   selector: 'app-root',
+  styles: `
+    .column {
+      @apply flex flex-1 flex-col gap-5;
+    }
+
+    .list-item {
+      @apply flex flex-row border-b px-5 pb-2;
+
+      span {
+        @apply flex-1;
+      }
+    }
+  `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <div class="flex flex-1 flex-col gap-5">
+      <div class="column">
         <section>
-          <h4 class="subtitle">2008</h4>
+          <h3>2008</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
             mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -18,7 +31,7 @@ import { Component } from '@angular/core';
         </section>
 
         <section>
-          <h4 class="subtitle">2010</h4>
+          <h3>2010</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
             mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -28,7 +41,7 @@ import { Component } from '@angular/core';
         </section>
 
         <section>
-          <h4 class="subtitle">2012</h4>
+          <h4>2012</h4>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
             mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -38,41 +51,38 @@ import { Component } from '@angular/core';
         </section>
       </div>
 
-      <div class="flex flex-1 flex-col gap-5">
-        <div class="flex flex-col gap-3">
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">Name:</div>
-            <div class="value flex-1">Samuel</div>
-          </div>
+      <div class="column">
+        <div class="list-item">
+          <span>Name:</span>
+          <span>Samuel</span>
+        </div>
 
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">Age:</div>
-            <div class="value flex-1">28</div>
-          </div>
+        <div class="list-item">
+          <span>Age:</span>
+          <span>28</span>
+        </div>
 
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">Birthdate:</div>
-            <div class="value flex-1">02.11.1995</div>
-          </div>
+        <div class="list-item">
+          <span>Birthdate:</span>
+          <span>02.11.1995</span>
+        </div>
 
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">City:</div>
-            <div class="value flex-1">Berlin</div>
-          </div>
+        <div class="list-item">
+          <span>City:</span>
+          <span>Berlin</span>
+        </div>
 
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">Language:</div>
-            <div class="value flex-1">English</div>
-          </div>
+        <div class="list-item">
+          <span>Language:</span>
+          <span>English</span>
+        </div>
 
-          <div class="flex flex-col border-b px-5 pb-2 lg:flex-row">
-            <div class="key flex-1">Like Pizza:</div>
-            <div class="value flex-1">Hell yeah</div>
-          </div>
+        <div class="list-item">
+          <span>Like Pizza:</span>
+          <span>Hell yeah</span>
         </div>
       </div>
     </div>
   `,
-  styles: [''],
 })
 export class AppComponent {}