feat(components): top bar component

Author: MM25Zamanian

packages/components/src/top-bar/_end-icon-list.ts

@@ -1,14 +1,14 @@
-import {gecutButton, type ButtonContent} from '../button/button.js';
-import {iconButton} from '../icon-button/icon-button.js';
+import {gecutButton} from '../button/button.js';
+import {gecutIconButton} from '../icon-button/icon-button.js';
 
-import type {IconButtonContent} from '../icon-button/icon-button.js';
+import type {EndIconType} from './_type.js';
 
-export const endIconListTemplate = (_list?: (IconButtonContent | ButtonContent)[]) => {
+export const endIconListTemplate = (_list?: EndIconType[]) => {
   return _list?.map((content) => {
-    if ('type' in content) {
-      return gecutButton(content);
+    if (content.element === 'icon-button') {
+      return gecutIconButton(content);
     }
 
-    return iconButton(content);
+    return gecutButton(content);
   });
 };

packages/components/src/top-bar/_type.ts

@@ -1,9 +1,11 @@
 import type {ButtonContent} from '../button/button.js';
 import type {IconButtonContent} from '../icon-button/icon-button.js';
 
+export type EndIconType = (IconButtonContent & {element: 'icon-button'}) | (ButtonContent & {element: 'button'});
+
 export interface TopBarContent {
   title: string;
 
   startIcon?: IconButtonContent;
-  endIconList?: (IconButtonContent | ButtonContent)[];
+  endIconList?: EndIconType[];
 }

packages/components/src/top-bar/center-top-bar.ts

@@ -2,7 +2,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {html, nothing} from 'lit/html.js';
 
 import {endIconListTemplate} from './_end-icon-list.js';
-import {iconButton} from '../icon-button/icon-button.js';
+import {gecutIconButton} from '../icon-button/icon-button.js';
 
 import type {TopBarContent} from './_type.js';
 
@@ -11,7 +11,7 @@ export const gecutCenterTopBar = (content: TopBarContent, scroll = false) =>
     class="z-sticky flex h-16 shrink-0 grow-0 select-none items-center
            bg-surface [&.scroll]:bg-surfaceContainer ${classMap({scroll})}"
   >
-    ${content.startIcon ? iconButton(content.startIcon) : nothing}
+    ${content.startIcon ? gecutIconButton(content.startIcon) : nothing}
 
     <div class="lead grow overflow-clip whitespace-nowrap px-1 text-center text-titleLarge text-onSurface">
       ${content.title}

packages/components/src/top-bar/small-top-bar.ts

@@ -2,7 +2,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {html, nothing} from 'lit/html.js';
 
 import {endIconListTemplate} from './_end-icon-list.js';
-import {iconButton} from '../icon-button/icon-button.js';
+import {gecutIconButton} from '../icon-button/icon-button.js';
 
 import type {TopBarContent} from './_type.js';
 
@@ -11,7 +11,7 @@ export const gecutSmallTopBar = (content: TopBarContent, scroll = false) =>
     class="z-sticky flex h-16 shrink-0 grow-0 select-none items-center
            bg-surface [&.scroll]:bg-surfaceContainer ${classMap({scroll})}"
   >
-    ${content.startIcon ? iconButton(content.startIcon) : nothing}
+    ${content.startIcon ? gecutIconButton(content.startIcon) : nothing}
 
     <div class="lead me-auto overflow-clip whitespace-nowrap px-1 text-center text-titleLarge text-onSurface">
       ${content.title}