41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import { useChat } from '../../providers/chat-provider';
|
|
import '../../styles/selector.css';
|
|
|
|
export function PersonSelector() {
|
|
const [search, setSearch] = React.useState('');
|
|
const { instance } = useChat();
|
|
|
|
return (
|
|
<div className="selector-container">
|
|
<div className="selector-header">
|
|
{instance?.logo && <img src={instance.logo} className="selector-logo" alt="Logo" />}
|
|
</div>
|
|
<div className="search-container">
|
|
<svg className="search-icon" viewBox="0 0 24 24">
|
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="search-input"
|
|
placeholder="Search conversations..."
|
|
/>
|
|
</div>
|
|
<div className="selector-list">
|
|
{['FAQ', 'Support', 'Sales'].map((item) => (
|
|
<div key={item} className="selector-item">
|
|
<div className="selector-avatar">
|
|
<span>{item[0]}</span>
|
|
</div>
|
|
<div className="item-content">
|
|
<h3 className="item-title">{item}</h3>
|
|
<p className="item-subtitle">Start a conversation</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|