tabler/preview/pages/chat.astro

---
// Front matter page-container-class: "flex-fill d-flex flex-column" → containerClass prop.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import Chat from '@ui/Chat.astro'
import people from '@data/people.json'
import chats from '@data/chats.json'

interface Person {
  full_name?: string
  photo?: string
  [key: string]: unknown
}

interface Message {
  message?: string
  [key: string]: unknown
}

const sidebarPeople = (people as Person[]).slice(0, 10)
const messages = chats as Message[]
---

<DefaultLayout title="Chat" pageHeader="Chat" pageMenu="extra.chat" containerClass="flex-fill d-flex flex-column">
  <div class="card flex-fill">
    <div class="row g-0 flex-fill">
      <div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
        <div class="card-header d-none d-md-block">
          <div class="input-icon">
            <span class="input-icon-addon"> <Icon name="search" /> </span>
            <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search" />
          </div>
        </div>
        <div class="card-body p-0 scrollable flex-fill">
          <div class="nav flex-column nav-pills" role="tablist">
            {
              sidebarPeople.map((person, i) => {
                const index = i + 1
                return (
                  <a href="#chat-1" class:list={['nav-link text-start mw-100 p-3', index === 1 && 'active']} id="chat-1-tab" data-bs-toggle="pill" role="tab" aria-selected="true">
                    <div class="row align-items-center flex-fill">
                      <div class="col-auto">
                        <Avatar person={person} />
                      </div>
                      <div class="col text-body">
                        <div>{person.full_name}</div>
                        <div class="text-secondary text-truncate w-100" set:html={messages[index]?.message} />
                      </div>
                      {index === 7 && <div class="col-auto">🌴</div>}
                    </div>
                  </a>
                )
              })
            }
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
        <div class="card-body scrollable"><Chat wide /></div>
        <div class="card-footer">
          <div class="input-group input-group-flat">
            <input type="text" class="form-control" autocomplete="off" placeholder="Type message" />

            <span class="input-group-text">
              <a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Clear search" title="Clear search"> <Icon name="mood-smile" /> </a>

              <a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Add notification" title="Add notification"> <Icon name="paperclip" /> </a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>