Add components for displaying metadata items

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-atomic-item/exercise-metadata-atomic-item.component.html

+<div *ngIf="value && value.length > 0" class="row">
+    <div jhiTranslate="{{description}}"
+        class="col-4"></div>
+    <div class="col-8">{{value}}</div>
+</div>

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-atomic-item/exercise-metadata-atomic-item.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'jhi-exercise-metadata-atomic-item',
+  templateUrl: './exercise-metadata-atomic-item.component.html',
+  styleUrls: ['./exercise-metadata-atomic-item.component.scss'],
+})
+export class ExerciseMetadataAtomicItemComponent implements OnInit {
+  @Input() description: string | undefined;
+  @Input() value: string | undefined;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-list-item/exercise-metadata-list-item.component.html

+<div *ngIf="value && value.length > 0" class="row">
+    <div *ngIf="value.length === 1"
+         jhiTranslate="{{descriptionSingular}}"
+         class="col-4"></div>
+    <div *ngIf="value.length > 1"
+         jhiTranslate="{{descriptionPlural}}"
+         class="col-4"></div>
+    <div class="col-8">{{value}}</div>
+</div>

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-list-item/exercise-metadata-list-item.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'jhi-exercise-metadata-list-item',
+  templateUrl: './exercise-metadata-list-item.component.html',
+  styleUrls: ['./exercise-metadata-list-item.component.scss'],
+})
+export class ExerciseMetadataListItemComponent implements OnInit {
+  @Input() descriptionSingular: string | undefined;
+  @Input() descriptionPlural: string | undefined;
+  @Input() value: string | undefined;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/main/webapp/app/exercise/exercise.module.ts

@@ -4,10 +4,18 @@ import { GitSearchV2SharedModule } from 'app/shared/shared.module';
 import { ExerciseCardComponent } from './exercise-card/exercise-card.component';
 import { ExerciseDetailsComponent } from './exercise-details/exercise-details.component';
 import { ExerciseMetadataComponent } from './exercise-details/exercise-metadata/exercise-metadata.component';
+import { ExerciseMetadataAtomicItemComponent } from './exercise-details/exercise-metadata/exercise-metadata-atomic-item/exercise-metadata-atomic-item.component';
+import { ExerciseMetadataListItemComponent } from './exercise-details/exercise-metadata/exercise-metadata-list-item/exercise-metadata-list-item.component';
 
 @NgModule({
   imports: [GitSearchV2SharedModule],
-  declarations: [ExerciseCardComponent, ExerciseDetailsComponent, ExerciseMetadataComponent],
+  declarations: [
+    ExerciseCardComponent,
+    ExerciseDetailsComponent,
+    ExerciseMetadataComponent,
+    ExerciseMetadataAtomicItemComponent,
+    ExerciseMetadataListItemComponent,
+  ],
   exports: [ExerciseCardComponent, ExerciseDetailsComponent],
 })
 export class ExerciseModule {}