feat(components/top-bar): context for title

Author: MM25Zamanian

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

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

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

@@ -1,3 +1,4 @@
+import {gecutContext} from '@gecut/lit-helper/directives/context.js';
 import {html, nothing} from 'lit/html.js';
 
 import {endIconListTemplate} from './_end-icon-list.js';
@@ -11,7 +12,7 @@ export const gecutCenterTopBar = (content: TopBarContent) => html`
       <div>${content.startIcon ? gecutIconButton(content.startIcon) : nothing}</div>
 
       <div class="gecut-top-bar-title">
-        <h1>${content.title}</h1>
+        <h1>${typeof content.title === 'string' ? content.title : gecutContext(content.title)}</h1>
       </div>
 
       <div>${endIconListTemplate(content.endIconList)}</div>

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

@@ -11,7 +11,7 @@ export const gecutSmallTopBar = (content: TopBarContent) => html`
       <div>${content.startIcon ? gecutIconButton(content.startIcon) : nothing}</div>
 
       <div class="gecut-top-bar-title">
-        <h1>${content.title}</h1>
+        <h1>${typeof content.title === 'string' ? content.title : gecutContext(content.title)}</h1>
       </div>
 
       <div>${endIconListTemplate(content.endIconList)}</div>