From 024be15cd52439877d00686ad1be76dd4016ca7d Mon Sep 17 00:00:00 2001
From: AdamBtech <60339324+AdamBtech@users.noreply.github.com>
Date: Mon, 2 Jun 2025 18:22:59 +0200
Subject: [PATCH] Refactored detail-block into shared component

---
 .../column-education-info.component.css       | 38 -------------------
 .../column-education-info.component.html      | 11 +-----
 .../column-education-info.component.ts        |  3 +-
 .../column-professional-info.component.css    | 38 -------------------
 .../column-professional-info.component.html   | 11 +-----
 .../column-professional-info.component.ts     |  3 +-
 .../detail-block/detail-block.component.css   | 36 ++++++++++++++++++
 .../detail-block/detail-block.component.html  |  4 ++
 .../detail-block/detail-block.component.ts    | 12 ++++++
 .../shared/info-card/info-card.component.css  |  0
 .../shared/info-card/info-card.component.html |  1 +
 .../shared/info-card/info-card.component.ts   | 11 ++++++
 12 files changed, 72 insertions(+), 96 deletions(-)
 create mode 100644 src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.css
 create mode 100644 src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.html
 create mode 100644 src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.ts
 create mode 100644 src/app/pages/experience/operative-history/shared/info-card/info-card.component.css
 create mode 100644 src/app/pages/experience/operative-history/shared/info-card/info-card.component.html
 create mode 100644 src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts

diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css
index 684c18a..4892b79 100644
--- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css
+++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css
@@ -125,44 +125,6 @@
   text-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
-/* Detail Blocks */
-.detail-block {
-  margin-bottom: var(--card-gap);
-  padding: 0.25rem;
-  border-left: 2px solid transparent;
-  transition: border-color 0.3s ease, padding-left 0.3s ease;
-}
-
-.detail-block:hover {
-  border-left-color: var(--color-nier-accent);
-  padding-left: 0.5rem;
-}
-
-.detail-label {
-  font-family: var(--font-terminal);
-  font-size: 0.75rem;
-  color: var(--color-nier-text-dark);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: block;
-  margin-bottom: 0.25rem;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.detail-block:hover .detail-label {
-  opacity: 1;
-}
-
-.detail-value {
-  font-family: var(--font-noto-jp);
-  color: var(--color-nier-text-dark);
-  font-size: 0.85rem;
-  line-height: 1.4;
-  display: block;
-}
-
 /* Tech Stack Section */
 .tech-section {
   margin-top: var(--card-gap);
diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html
index 78977c2..07f6f1a 100644
--- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html
+++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html
@@ -13,15 +13,8 @@
       </header>
 
       <div class="experience-body">
-        <div class="detail-block">
-          <span class="detail-label">PROGRAM:</span>
-          <span class="detail-value">{{ training.classification }}</span>
-        </div>
-
-        <div class="detail-block">
-          <span class="detail-label">INSTITUTION:</span>
-          <span class="detail-value">{{ training.timeline }}</span>
-        </div>
+        <app-detail-block label="PROGRAM:" [value]="training.classification"/>
+        <app-detail-block label="INSTITUTION:" [value]="training.timeline"/>
 
         <div class="tech-section">
           <div class="detail-label">CURRICULUM:</div>
diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts
index ba9649e..67541c1 100644
--- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts
+++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts
@@ -1,9 +1,10 @@
 import { Component, signal } from '@angular/core';
 import { type Experience } from '../../../../shared/models/experience.model';
+import { DetailBlockComponent } from '../shared/detail-block/detail-block.component';
 
 @Component({
   selector: 'app-column-education-info',
-  imports: [],
+  imports: [DetailBlockComponent],
   templateUrl: './column-education-info.component.html',
   styleUrl: './column-education-info.component.css',
 })
diff --git a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.css b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.css
index 829e0e7..1c5c9f0 100644
--- a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.css
+++ b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.css
@@ -150,44 +150,6 @@
   color: var(--color-nier-text-light);
 }
 
-/* Detail Blocks */
-.detail-block {
-  margin-bottom: var(--card-gap);
-  padding: 0.25rem;
-  border-left: 2px solid transparent;
-  transition: border-color 0.3s ease, padding-left 0.3s ease;
-}
-
-.detail-block:hover {
-  border-left-color: var(--color-nier-accent);
-  padding-left: 0.5rem;
-}
-
-.detail-label {
-  font-family: var(--font-terminal);
-  font-size: 0.75rem;
-  color: var(--color-nier-text-dark);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: block;
-  margin-bottom: 0.25rem;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.detail-block:hover .detail-label {
-  opacity: 1;
-}
-
-.detail-value {
-  font-family: var(--font-noto-jp);
-  color: var(--color-nier-text-dark);
-  font-size: 0.85rem;
-  line-height: 1.4;
-  display: block;
-}
-
 /* Tech Stack Section */
 .tech-section {
   margin-top: var(--card-gap);
diff --git a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.html b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.html
index c16e5ff..d298248 100644
--- a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.html
+++ b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.html
@@ -22,15 +22,8 @@
         </header>
 
         <div class="experience-body">
-          <div class="detail-block">
-            <span class="detail-label">CLASSIFICATION:</span>
-            <span class="detail-value">{{ experience.classification }}</span>
-          </div>
-
-          <div class="detail-block">
-            <span class="detail-label">TIMELINE:</span>
-            <span class="detail-value">{{ experience.timeline }}</span>
-          </div>
+          <app-detail-block label="CLASSIFICATION:" [value]="experience.classification"/>
+          <app-detail-block label="TIMELINE:" [value]="experience.timeline"/>
 
           <div class="tech-section">
             <div class="detail-label">TECH_STACK:</div>
diff --git a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.ts b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.ts
index 33c560e..732956e 100644
--- a/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.ts
+++ b/src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.ts
@@ -1,9 +1,10 @@
 import { Component, signal } from '@angular/core';
 import { Experience } from '../../../../shared/models/experience.model';
+import { DetailBlockComponent } from '../shared/detail-block/detail-block.component';
 
 @Component({
   selector: 'app-column-professional-info',
-  imports: [],
+  imports: [DetailBlockComponent],
   templateUrl: './column-professional-info.component.html',
   styleUrl: './column-professional-info.component.css',
 })
diff --git a/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.css b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.css
new file mode 100644
index 0000000..60cbfab
--- /dev/null
+++ b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.css
@@ -0,0 +1,36 @@
+.detail-block {
+  margin-bottom: var(--card-gap);
+  padding: 0.25rem;
+  border-left: 2px solid transparent;
+  transition: border-color 0.3s ease, padding-left 0.3s ease;
+}
+
+.detail-block:hover {
+  border-left-color: var(--color-nier-accent);
+  padding-left: 0.5rem;
+}
+
+.detail-label {
+  font-family: var(--font-terminal);
+  font-size: 0.75rem;
+  color: var(--color-nier-text-dark);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 0.25rem;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+.detail-block:hover .detail-label {
+  opacity: 1;
+}
+
+.detail-value {
+  font-family: var(--font-noto-jp);
+  color: var(--color-nier-text-dark);
+  font-size: 0.85rem;
+  line-height: 1.4;
+  display: block;
+}
diff --git a/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.html b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.html
new file mode 100644
index 0000000..0cf8db1
--- /dev/null
+++ b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.html
@@ -0,0 +1,4 @@
+<div class="detail-block">
+  <span class="detail-label">{{ label()}}</span>
+  <span class="detail-value">{{ value() }}</span>
+</div>
diff --git a/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.ts b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.ts
new file mode 100644
index 0000000..3bc6b1a
--- /dev/null
+++ b/src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.ts
@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-block',
+  imports: [],
+  templateUrl: './detail-block.component.html',
+  styleUrl: './detail-block.component.css',
+})
+export class DetailBlockComponent {
+  label = input<string>();
+  value = input<string>();
+}
diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.css b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html
new file mode 100644
index 0000000..41f7c99
--- /dev/null
+++ b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html
@@ -0,0 +1 @@
+<p>info-card works!</p>
diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts
new file mode 100644
index 0000000..c0dbe0c
--- /dev/null
+++ b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-info-card',
+  imports: [],
+  templateUrl: './info-card.component.html',
+  styleUrl: './info-card.component.css'
+})
+export class InfoCardComponent {
+
+}