https://trailhead.salesforce.com/ja/content/learn/projects/workshop-platform-events/create-app

notificationConsole.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="notifications" type="List"/>
    <aura:attribute name="isMuted" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <aura:registerEvent name="toastEvent" type="force:showToast"/>
    <div class="countainer">
        <!-- Header -->
        <div class="slds-p-around_x-small slds-border_bottom slds-theme_shade">
            <div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
                <div>
                    <span class="slds-badge">{!v.notifications.length}</span>
                </div>
                <div>
                    <lightning:buttonIcon onclick="{!c.onClear}" iconName="utility:delete" title="Clear notifications" alternativeText="Clear notifications" variant="border-filled"/>
                    <lightning:buttonIcon onclick="{!c.onToggleMute}" iconName="{!v.isMuted ? 'utility:volume_off' : 'utility:volume_high'}" title="{!v.isMuted ? 'Unmute notifications' : 'Mute notifications'}" alternativeText="Toggle mute" variant="border-filled"/>
                </div>
            </div>
        </div>
        <!-- Notification list -->
        <div class="slds-container_fluid slds-scrollable_y content">
            <aura:iteration items="{!v.notifications}" var="notification">
                <div class="slds-p-around_small slds-border_top">
                    <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
                        <p>{!notification.message}</p>
                        <p class="slds-text-color_weak slds-p-left_x-small">{!notification.time}</p>
                    </div>
                </div>
            </aura:iteration>
        </div>
    </div>
</aura:component>

notificationConsole.css

.THIS.container {
    height: 100%;
}
.THIS .content {
    height: calc(100% - 49px);
}

notificationConsoleController.js

({
    onInit: function (component, event, helper) {
        component.set('v.notifications', [
            { time: '00:01', message: 'Greetings Trailblazer!'},
            { time: '00:02', message: 'Congratulations on building this first version of the app.'},
            { time: '00:03', message: 'Beware of the bears.'}
        ]);
        helper.displayToast(component, 'success', 'Ready to receive notifications.');
    },
    onClear: function (component, event, helper) {
        component.set('v.notifications', []);
    },
    onToggleMule: function (component, event, helper) {
        const isMuted = component.get('v.isMuted');
        component.set('v.isMuted', !isMuted);
        helper.displayToast(component, 'success', 'Notifications ' + ((!isMuted) ? 'muted': 'unmuted') + '.');
    }
})

notificationConsoleHelper.js

({
    displayToast : function(component, type, message) {
        const toastEvent = $A.get('e.force:showToast');
        toastEvent.setParams({
            type: type,
            message: message
        });
        toastEvent.fire();
    }
})