ic

apps/voz-del-cliente/gui/components/ChatSidebar.tsx

@@ -0,0 +1,55 @@
+export { ChatSidebar };
+
+interface ChatSidebarProps {
+  assistant: string;
+  logoSrc: string;
+  sidebarImageSrc: string;
+  assistantAvatarSrc: string;
+}
+
+function ChatSidebar({
+  assistant,
+  logoSrc,
+  sidebarImageSrc,
+  assistantAvatarSrc,
+}: ChatSidebarProps) {
+  return (
+    <>
+      <nav className="bg-[#1b0103] shadow-lg min-h-[641px] min-w-[250px] py-6 px-6 font-[sans-serif] flex flex-col overflow-auto w-[272px] 2xl:h-screen">
+        <div className="flex flex-wrap items-center cursor-pointer">
+          <div className="relative w-full mb-12 ">
+            <div className="mx-5 w-3/4 -inset-3mt-2">
+              <a href="/">
+                <img className="h-10" src={logoSrc} alt="Logo" />
+              </a>
+            </div>
+          </div>
+          <div className="relative items-center text-center mx-auto -mt-5">
+            <img src={assistantAvatarSrc} className="w-24 h-24 border-white" />
+          </div>
+        </div>
+        <div className="mt-2 items-center text-center mx-auto">
+          <h2 className="text-xl font-extrabold text-gray-300">Maya</h2>
+          <h2 className="text-xl font-extrabold text-gray-300">{assistant}</h2>
+        </div>
+
+        <ul className="space-y-3 flex-1 mt-5 mb-10 pl-5"></ul>
+        <ul className="w-full">
+          <li className="w-full">
+            <a
+              href=""
+              className="text-gray-300 hover:text-white text-base flex items-center rounded-md"
+            ></a>
+          </li>
+        </ul>
+        <div className="w-[272px] -p-6 -m-6">
+          <img
+            src={sidebarImageSrc}
+            alt="Sidebar Image"
+            className="w-[272px]"
+          />
+        </div>
+      </nav>
+    </>
+  );
+}