diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
index 3d759f2e5..20063f928 100644
--- a/packages/core/demo/index.html
+++ b/packages/core/demo/index.html
@@ -53,7 +53,7 @@
Explanation
A normal conversation
-
+
Hey guys, I'm new here! Glad to be able to join you all!
('light-theme');
export const messagesCompactMode = createContext('compact-mode');
@@ -55,6 +61,35 @@ export class DiscordMessages extends LitElement implements LightTheme {
margin-bottom: 0.5rem;
border-bottom-width: 0;
}
+
+ :host .discord-channel-header {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ box-shadow:
+ 0 2px 0 0 rgba(0, 0, 0, 0.05),
+ 0 1.5px 0 0 rgba(0, 0, 0, 0.05),
+ 0 1px 0 0 rgba(0, 0, 0, 0.16);
+ }
+
+ :host .discord-channel-icon {
+ height: 24px;
+ width: auto;
+ margin: 0 8px;
+ position: relative;
+ flex: 0 0 auto;
+ color: #80848e;
+ }
+
+ :host([light-theme]) .discord-channel-icon {
+ color: #6d6f78;
+ }
+
+ :host .discord-channel-name {
+ margin: 0 8px 0 0;
+ flex: 0 0 auto;
+ min-width: auto;
+ }
`;
/**
@@ -78,6 +113,20 @@ export class DiscordMessages extends LitElement implements LightTheme {
@property({ type: Boolean, reflect: true, attribute: 'compact-mode' })
public accessor compactMode = false;
+ /**
+ * The type of channel this should be, this will be displayed above the message and only applies if {@link DiscordMessages.channelName} is set.
+ * Valid values are: `text`, `forum`, `locked`, `thread`, and `voice`.
+ */
+ @property({ reflect: true, attribute: 'channel-type' })
+ public accessor channelType: 'forum' | 'locked' | 'text' | 'thread' | 'voice';
+
+ /**
+ * The name of the channel, this will be displayed above the message and only applies if {@link DiscordMessages.channelType} is set.
+ */
+
+ @property({ reflect: true, attribute: 'channel-name' })
+ public accessor channelName: string;
+
public override connectedCallback(): void {
super.connectedCallback();
@@ -95,7 +144,36 @@ export class DiscordMessages extends LitElement implements LightTheme {
}
protected override render() {
- return html``;
+ let channelIcon: ReturnType;
+ switch (this.channelType) {
+ case 'text':
+ channelIcon = html`${ChannelIcon()}`;
+ break;
+ case 'voice':
+ channelIcon = html`${VoiceChannel()}`;
+ break;
+ case 'locked':
+ channelIcon = html`${LockedVoiceChannel()}`;
+ break;
+ case 'thread':
+ channelIcon = html`${ChannelThread()}`;
+ break;
+ case 'forum':
+ channelIcon = html`${ChannelForum()}`;
+ break;
+ }
+
+ return html`
+ ${when(
+ this.channelType && this.channelName,
+ () =>
+ html``
+ )}
+
+ `;
}
}