mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
89 lines
2.8 KiB
Plaintext
89 lines
2.8 KiB
Plaintext
---
|
|
// Port of preview/pages/chat.html (layout: default)
|
|
// Front matter page-container-class: "flex-fill d-flex flex-column" → containerClass prop.
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Icon from '@shared/components/Icon.astro';
|
|
import Avatar from '@shared/components/ui/Avatar.astro';
|
|
import Chat from '@shared/components/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>
|