82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Send, DollarSign } from 'lucide-react';
|
|
import type { LiveViewChatMessage } from './types';
|
|
|
|
interface LiveViewChatProps {
|
|
messages: LiveViewChatMessage[];
|
|
msgInput: string;
|
|
onMsgInputChange: (value: string) => void;
|
|
onSend: () => void;
|
|
onWalletClick?: () => void;
|
|
}
|
|
|
|
export function LiveViewChat({
|
|
messages,
|
|
msgInput,
|
|
onMsgInputChange,
|
|
onSend,
|
|
onWalletClick,
|
|
}: LiveViewChatProps) {
|
|
return (
|
|
<Card
|
|
variant="glass"
|
|
className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full min-h-0"
|
|
>
|
|
<div className="p-4 border-b border-border flex justify-between items-center bg-card">
|
|
<span className="font-mono text-sm font-bold text-foreground tracking-tight">
|
|
STREAM CHAT
|
|
</span>
|
|
<div className="w-2 h-2 bg-success rounded-full animate-pulse" />
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 font-mono text-sm">
|
|
{messages.map((msg, i) => (
|
|
<div key={i} className="break-words">
|
|
<span
|
|
className={`font-bold ${msg.color} mr-2 cursor-pointer hover:underline`}
|
|
>
|
|
{msg.user}:
|
|
</span>
|
|
<span className="text-foreground">{msg.text}</span>
|
|
</div>
|
|
))}
|
|
<div className="text-center py-2">
|
|
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
|
|
Welcome to the chat room!
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 bg-muted border-t border-border">
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<input
|
|
value={msgInput}
|
|
onChange={(e) => onMsgInputChange(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && onSend()}
|
|
className="w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
|
|
placeholder="Say something..."
|
|
/>
|
|
<DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-warning cursor-pointer hover:opacity-80 transition-opacity" />
|
|
</div>
|
|
<Button variant="primary" size="sm" className="px-4" onClick={onSend}>
|
|
<Send className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex justify-between mt-2 px-1">
|
|
<span className="text-xs text-muted-foreground">
|
|
Balance: 420 $VEZA
|
|
</span>
|
|
<span
|
|
className="text-xs text-muted-foreground cursor-pointer hover:text-foreground"
|
|
onClick={onWalletClick}
|
|
>
|
|
Get Coins
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|