Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.7 kB · 84 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import type { LivestreamStore } from "@streamplace/core";import { ExternalLink } from "lucide-react";import { useTranslation } from "react-i18next";import { useStore } from "zustand";import { useShallow } from "zustand/react/shallow";import { SidebarContent, SidebarFooter, SidebarHeader } from "../ui/sidebar";import { ChatInput } from "./chat-input";import { ChatPanel } from "./chat-panel";import { StreamNotifications } from "./stream-notifications";
export function ChatSidebar({ store, onClose, avatar,}: { store: LivestreamStore; onClose?: () => void; avatar?: string;}) { const { t } = useTranslation("common"); const state = useStore( store, useShallow((s) => ({ livestream: s.livestream, viewers: s.viewers, })), );
const author = state.livestream?.author; return ( <div className="wide:border-l flex min-h-0 flex-1 flex-col"> <SidebarHeader className="wide:flex hidden border-b border-(--color-border)"> <div className="flex items-center gap-3 py-1"> <div className="flex-1 pl-2">Stream Chat</div> <div className="flex items-center gap-1"> <a href={`/chat-popout/${encodeURIComponent(author?.handle || "")}`} target="_blank" rel="noopener noreferrer" className="rounded p-1 text-(--color-fg-muted) transition-colors hover:bg-(--color-bg-overlay) hover:text-(--color-fg)" title={t("chat-pop-out")} aria-label={t("chat-pop-out")} > <ExternalLink className="h-3.5 w-3.5" /> </a>
{onClose && ( <button type="button" onClick={onClose} className="shrink-0 rounded p-1 text-(--color-fg-muted) transition-colors hover:bg-(--color-bg-overlay) hover:text-(--color-fg)" aria-label={t("chat-close")} > <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /> </svg> </button> )} </div> </div> </SidebarHeader>
<StreamNotifications store={store} />
<SidebarContent className="overflow-hidden p-0!"> <ChatPanel store={store} /> </SidebarContent>
<SidebarFooter> <ChatInput store={store} /> </SidebarFooter> </div> );}