feat(iot-hub): add YouTube link to creator profile

Add youtubeUrl to CreatorView and render it alongside the other creator social links. Reindents the link block so it nests correctly inside the surrounding flex column.

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html

@@ -61,36 +61,42 @@
             <p class="tb-creator-desc">{{ creator.description }}</p>
           }
           <div class="flex flex-col gap-1">
-          @if (creator.website) {
-            <a class="tb-creator-link tb-creator-link-primary" [href]="creator.website" target="_blank">
-              <mat-icon>language</mat-icon>
-              <span>{{ getWebsiteLabel() }}</span>
-            </a>
-          }
-          @if (creator.contactEmail) {
-            <span class="tb-creator-link">
-              <tb-icon>mdi:email-outline</tb-icon>
-              <span>{{ creator.contactEmail }}</span>
-            </span>
-          }
-          @if (creator.githubUrl) {
-            <a class="tb-creator-link" [href]="creator.githubUrl" target="_blank">
-              <tb-icon>mdi:github</tb-icon>
-              <span>GitHub</span>
-            </a>
-          }
-          @if (creator.linkedinUrl) {
-            <a class="tb-creator-link" [href]="creator.linkedinUrl" target="_blank">
-              <tb-icon>mdi:linkedin</tb-icon>
-              <span>LinkedIn</span>
-            </a>
-          }
-          @if (creator.twitterUrl) {
-            <a class="tb-creator-link" [href]="creator.twitterUrl" target="_blank">
-              <tb-icon>mdi:twitter</tb-icon>
-              <span>X</span>
-            </a>
-          }
+            @if (creator.website) {
+              <a class="tb-creator-link tb-creator-link-primary" [href]="creator.website" target="_blank">
+                <mat-icon>language</mat-icon>
+                <span>{{ getWebsiteLabel() }}</span>
+              </a>
+            }
+            @if (creator.contactEmail) {
+              <span class="tb-creator-link">
+                <tb-icon>mdi:email-outline</tb-icon>
+                <span>{{ creator.contactEmail }}</span>
+              </span>
+            }
+            @if (creator.githubUrl) {
+              <a class="tb-creator-link" [href]="creator.githubUrl" target="_blank">
+                <tb-icon>mdi:github</tb-icon>
+                <span>GitHub</span>
+              </a>
+            }
+            @if (creator.linkedinUrl) {
+              <a class="tb-creator-link" [href]="creator.linkedinUrl" target="_blank">
+                <tb-icon>mdi:linkedin</tb-icon>
+                <span>LinkedIn</span>
+              </a>
+            }
+            @if (creator.twitterUrl) {
+              <a class="tb-creator-link" [href]="creator.twitterUrl" target="_blank">
+                <tb-icon>mdi:twitter</tb-icon>
+                <span>X</span>
+              </a>
+            }
+            @if (creator.youtubeUrl) {
+              <a class="tb-creator-link" [href]="creator.youtubeUrl" target="_blank">
+                <tb-icon>mdi:youtube</tb-icon>
+                <span>YouTube</span>
+              </a>
+            }
           </div>
         </div>
       </div>

ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts

@@ -25,6 +25,7 @@ export interface CreatorView {
   githubUrl: string;
   linkedinUrl: string;
   twitterUrl: string;
+  youtubeUrl: string;
   publishedCount: number;
   verified: boolean;
 }