Refactor components to simplify them

src/page/header/header.html.ts

@@ -1,10 +1,17 @@
 import { html } from '../../types/html';
 import './header.scss';
 
-export const generate = (name: string): html => `
+export const generate = ({
+  name,
+  about,
+}: {
+  name: string;
+  about: Array<string>;
+}): html => `
   <section id="about">
     <div class="picture"></div>
     <div class="placeholder"></div>
     <h1>${name}</h1>
+    ${about.map((t) => `<p>${t}</p>`).join('\n')}
   </section>
 `;

src/page/header/header.ts

@@ -1,16 +1,22 @@
 import { createElement } from '../../helper/create-element';
 import { Image } from '../basics/image/image';
-import { PageContent } from '../content/content';
 import { PageElement } from '../page-element';
 import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
 import { generate } from './header.html';
 
 export class PageHeader extends PageElement {
-  public constructor(header: { name: string; photo: Image; about: Array<string> }) {
-    super(createElement(generate(header.name)));
+  public constructor({
+    name,
+    photo,
+    about,
+  }: {
+    name: string;
+    photo: Image;
+    about: Array<string>;
+  }) {
+    super(createElement(generate({ name, about })));
 
-    this.attachElementByReplacing('.picture', header.photo);
-    this.attachElement(new PageContent(header.about));
+    this.attachElementByReplacing('.picture', photo);
     this.attachElement(new PageThemeSwitcher());
   }
 }