ExposedGays: map, shop, auth, Supabase schema, Coolify Dockerfile
This commit is contained in:
Ryan Salazar
215
src/components/ChatPanel.tsx
Normal file
215
src/components/ChatPanel.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import { Send, Image as ImageIcon, Users, Lock } from "lucide-react";
|
||||
import { timeAgo } from "@/lib/utils";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
sender: string;
|
||||
content: string;
|
||||
image_url?: string;
|
||||
created_at: string;
|
||||
isMe?: boolean;
|
||||
}
|
||||
|
||||
const CITY = process.env.NEXT_PUBLIC_DEFAULT_CITY || "Fort Lauderdale";
|
||||
|
||||
const MOCK_CITY_MESSAGES: Message[] = [
|
||||
{
|
||||
id: "1",
|
||||
sender: "Mike_Top",
|
||||
content: "Anyone at the beach right now?",
|
||||
created_at: new Date(Date.now() - 300000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
sender: "Anonymous",
|
||||
content: "Yeah, south end. Busy tonight.",
|
||||
created_at: new Date(Date.now() - 240000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
sender: "VersBear",
|
||||
content: "Hosting near Wilton. Door code 1234. Clean only.",
|
||||
created_at: new Date(Date.now() - 120000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
sender: "PupRex",
|
||||
content: "Woof! At Ramrod later if anyone wants to meet up 🐾",
|
||||
created_at: new Date(Date.now() - 60000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_DM_MESSAGES: Message[] = [
|
||||
{
|
||||
id: "dm1",
|
||||
sender: "You",
|
||||
content: "Hey, saw you on the map. What's up?",
|
||||
created_at: new Date(Date.now() - 600000).toISOString(),
|
||||
isMe: true,
|
||||
},
|
||||
{
|
||||
id: "dm2",
|
||||
sender: "Mike_Top",
|
||||
content: "Not much, hosting. You?",
|
||||
created_at: new Date(Date.now() - 540000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
interface ChatPanelProps {
|
||||
dmUserId?: string | null;
|
||||
}
|
||||
|
||||
export function ChatPanel({ dmUserId }: ChatPanelProps) {
|
||||
const [cityMessages, setCityMessages] = useState<Message[]>(MOCK_CITY_MESSAGES);
|
||||
const [dmMessages, setDmMessages] = useState<Message[]>(MOCK_DM_MESSAGES);
|
||||
const [input, setInput] = useState("");
|
||||
const [activeTab, setActiveTab] = useState(dmUserId ? "dm" : "city");
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [cityMessages, dmMessages, activeTab]);
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!input.trim()) return;
|
||||
const msg: Message = {
|
||||
id: Date.now().toString(),
|
||||
sender: "You",
|
||||
content: input.trim(),
|
||||
created_at: new Date().toISOString(),
|
||||
isMe: true,
|
||||
};
|
||||
|
||||
if (activeTab === "city") {
|
||||
setCityMessages((prev) => [...prev, msg]);
|
||||
} else {
|
||||
setDmMessages((prev) => [...prev, msg]);
|
||||
}
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const messages = activeTab === "city" ? cityMessages : dmMessages;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
|
||||
<TabsList className="mx-4 mt-2 grid grid-cols-3">
|
||||
<TabsTrigger value="city" className="gap-1 text-xs">
|
||||
<Users className="h-3 w-3" />
|
||||
{CITY}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="dm" className="gap-1 text-xs">
|
||||
<Lock className="h-3 w-3" />
|
||||
DMs
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="groups" className="gap-1 text-xs">
|
||||
Groups
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="city" className="flex-1 flex flex-col mt-0 overflow-hidden">
|
||||
<div className="px-4 py-2 border-b border-border">
|
||||
<Badge variant="online" className="text-[10px]">
|
||||
{cityMessages.length + 12} in room
|
||||
</Badge>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Auto-joined based on your location. Public city chat.
|
||||
</p>
|
||||
</div>
|
||||
<MessageList messages={messages} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="dm" className="flex-1 flex flex-col mt-0 overflow-hidden">
|
||||
<div className="px-4 py-2 border-b border-border">
|
||||
<p className="text-sm font-medium">
|
||||
{dmUserId ? `Chat with User #${dmUserId}` : "Private Messages"}
|
||||
</p>
|
||||
</div>
|
||||
<MessageList messages={dmMessages} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="groups" className="flex-1 flex flex-col mt-0 overflow-hidden">
|
||||
<div className="p-4 space-y-2">
|
||||
<GroupRoom name="Leather Night FTL" members={8} />
|
||||
<GroupRoom name="Beach Cruisers" members={15} />
|
||||
<GroupRoom name="Gym Sauna Squad" members={4} />
|
||||
<p className="text-xs text-muted-foreground text-center pt-4">
|
||||
Create a group room — free, no limits.
|
||||
</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{(activeTab === "city" || activeTab === "dm") && (
|
||||
<div className="p-4 border-t border-border flex gap-2 safe-bottom">
|
||||
<Button variant="outline" size="icon">
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
<Input
|
||||
placeholder="Type a message..."
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button variant="horny" size="icon" onClick={sendMessage}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Tabs>
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageList({ messages }: { messages: Message[] }) {
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
|
||||
{messages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={`flex flex-col ${msg.isMe ? "items-end" : "items-start"}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span className="text-xs font-semibold text-horny-pink">
|
||||
{msg.sender}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{timeAgo(msg.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`max-w-[80%] rounded-xl px-3 py-2 text-sm ${
|
||||
msg.isMe
|
||||
? "bg-horny-pink/20 text-foreground"
|
||||
: "bg-secondary text-foreground"
|
||||
}`}
|
||||
>
|
||||
{msg.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupRoom({ name, members }: { name: string; members: number }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded-lg border border-border p-3 hover:border-horny-pink/30 cursor-pointer transition-colors">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{name}</p>
|
||||
<p className="text-xs text-muted-foreground">{members} members</p>
|
||||
</div>
|
||||
<Badge variant="online" className="text-[10px]">
|
||||
Live
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user