Full reformat

src/app/modules/dock/dock.component.html

@@ -0,0 +1,5 @@
+<section class="dock">
+  @for(link of links; track link.id) {
+  <app-link [url]="link.url" [svg]="link.svg" [text]="link.text"></app-link>
+  }
+</section>

src/app/modules/dock/dock.component.less

@@ -0,0 +1,27 @@
+.dock {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 330px;
+  height: 100px;
+  background-color: rgba(171, 178, 181, 30%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  margin-block-end: 1rem;
+  border-radius: 35px;
+  app-link {
+    width: 100%;
+    height: 100%;
+    padding: 0 0.5rem;
+    &:first-child {
+      padding-inline-start: 0;
+    }
+    &:last-child {
+      padding-inline-end: 0;
+    }
+  }
+}

src/app/modules/dock/dock.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { Link } from "../../interfaces/link";
+import { LinkComponent } from "../link/link.component";
+
+@Component({
+  standalone: true,
+  selector: "app-dock",
+  imports: [CommonModule, LinkComponent],
+  templateUrl: "./dock.component.html",
+  styleUrls: ["./dock.component.less"],
+})
+export class DockComponent {
+  readonly links: Link[] = [
+    {
+      id: 0,
+      svg: "../../../assets/svg/logo-telegram.svg",
+      url: "https://t.me/neur0w0men",
+      text: "Telegram channel",
+    },
+    {
+      id: 1,
+      svg: "../../../assets/svg/logo-github.svg",
+      url: "https://github.com/MrSedan",
+      text: "Admin's GitHub",
+    },
+    {
+      id: 2,
+      svg: "../../../assets/svg/logo-gitea.svg",
+      url: "https://git.nwaifu.su",
+      text: "Gitea",
+    },
+  ];
+}