チャットChatExperimental
メッセージアプリ用のレイアウトです。
プレビュー
状態とバリエーション
4つの口はどれも省略できます。左の一覧は中くらいの幅から、右の詳細はかなり広い幅から現れるので、狭い画面では真ん中の流れだけが残ります。
3つの段
一覧・流れ・詳細をそろえた最も広い形です。右の詳細は横幅がかなり広いときだけ出ます。
#general
配色の見直し、今日中に上げます。
助かります。急ぎではないです。
詳細を外す
sidebarDetail を省くと、流れが右まで広がります。会話の中身に集中させたいときの形です。
#general
配色の見直し、今日中に上げます。
助かります。急ぎではないです。
書き込み欄なし
composer を省くと入力欄が消え、読むだけの画面になります。過去ログや、権限の無い人に見せる画面に使います。
#general
配色の見直し、今日中に上げます。
助かります。急ぎではないです。
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| sidebarList | React.ReactNode | - | Content for the left sidebar (e.g., channel list, user list). |
| sidebarDetail | React.ReactNode | - | Content for the right sidebar (e.g., active thread, user profile). |
| header | React.ReactNode | - | Content for the chat header (e.g., channel name, actions). |
| children | React.ReactNode | - | The main content area (message stream). |
| composer | React.ReactNode | - | Content for the message composer area at the bottom. |
| className | string | - | Additional classes for the root container. |
Usage
import { ChatTemplate, Button, Input } from "@gunjo/ui";
export function ChatPage() {
return (
<div className="h-screen">
<ChatTemplate
sidebarList={
<div className="w-full flex-1 p-4">
<div className="font-bold mb-4">Channels</div>
{/* List of channels/users */}
</div>
}
header={
<div className="flex items-center justify-between w-full">
<span className="font-bold">#general</span>
<Button variant="ghost" size="icon">Settings</Button>
</div>
}
composer={
<div className="flex gap-2">
<Input placeholder="Type a message..." />
<Button>Send</Button>
</div>
}
sidebarDetail={
<div className="p-4">
<h3 className="font-bold">Thread Details</h3>
</div>
}
>
<div className="flex flex-col gap-4">
{/* Message List */}
<div className="bg-muted p-3 rounded-lg max-w-[80%] self-start">
Hello! This is a chat template.
</div>
<div className="bg-primary text-primary-foreground p-3 rounded-lg max-w-[80%] self-end">
Looks great!
</div>
</div>
</ChatTemplate>
</div>
)
}