File size: 5,200 Bytes
df5c323 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | import React from 'react';
import '../App.css';
const Panel = ({
conversations = [],
setConversations = () => {},
activeConversationId,
setActiveConversationId,
onToggleCollapse,
isCollapsed,
onNewChat
}) => {
const createNewChat = () => {
onNewChat();
};
const deleteConversation=(conversationId)=>{
console.log(conversationId)
setConversations(prev => prev.filter(chat => chat.id !== conversationId));
setActiveConversationId(null);
}
return (
<div className={`sidebar-panel ${isCollapsed ? 'collapsed' : ''}`}>
<div className="sidebar-header">
{!isCollapsed && (
<button className="collapse-button" onClick={onToggleCollapse}>
<svg
fill="#FFFF"
width="20"
height="20"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style>{`.cls-1{fill:none;}`}</style>
</defs>
<title>open-panel--solid--left</title>
<path d="M28,4H4A2,2,0,0,0,2,6V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Zm0,22H12V6H28Z" />
<rect
id="_Transparent_Rectangle_"
data-name="<Transparent Rectangle>"
className="cls-1"
width="20"
height="20"
/>
</svg>
</button>
)}
<button className="new-chat-button" onClick={createNewChat}>
{!isCollapsed && (
<span>
<svg
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
>
<path d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z" />
</svg>
</span>
)}
</button>
</div>
<div className="conversations-list">
<div class="conversation-today">
<h6 className="conversation-today-title">Aujourd'hui</h6>
{conversations.map(chat => (
<div
key={chat.id}
className={`conversation-item ${activeConversationId === chat.id ? 'active' : ''}`}
onClick={() => setActiveConversationId(chat.id)}
>
{!isCollapsed && (
<>
<div className="conversation-icon">
<span className="material-icons">{chat.time}</span>
</div>
<div className="conversation-details">
<div className="conversation-title">{chat.title}</div>
<div className="conversation-date">{chat.date}</div>
</div>
<button className="delete-button" onClick={(e) => {
e.stopPropagation();
deleteConversation(chat.id);
}}>
<span>
<svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ff0000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</span>
</button>
</>
)}
</div>
))}
</div>
<div class="conversation-before">
<h6 className="conversation-before-title">Les 30 derniers jours</h6>
</div>
</div>
</div>
);
};
export default Panel;
|