Untitled

import React, { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Send } from "lucide-react"; import { motion } from "framer-motion";

export default function WhatsAppUI() { const [messages, setMessages] = useState([ { text: "Hello 👋", sender: "other" }, { text: "Hi! Kaise ho?", sender: "me" }, ]); const [input, setInput] = useState("");

const sendMessage = () => { if (!input.trim()) return; setMessages([...messages, { text: input, sender: "me" }]); setInput(""); };

return ( <div className="flex items-center justify-center min-h-screen bg-gray-100 p-4"> <Card className="w-full max-w-md h-[600px] flex flex-col rounded-2xl shadow-xl"> {/* Header */} <div className="bg-green-600 text-white p-4 rounded-t-2xl text-lg font-semibold"> Mahima 💚 </div>

{/* Chat Area */}
    <CardContent className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
          {messages.map((msg, index) => (
                    <motion.div
                              key={index}
                                        initial={{ opacity: 0, y: 10 }}
                                                  animate={{ opacity: 1, y: 0 }}
                                                            transition={{ duration: 0.2 }}
                                                                      className={`flex ${
                                                                                    msg.sender === "me" ? "justify-end" : "justify-start"
                                                                      }`}
                                                                              >
                                                                                        <div
                                                                                                    className={`px-4 py-2 rounded-2xl max-w-xs text-sm shadow ${
                                                                                                                      msg.sender === "me"
                                                                                                                                      ? "bg-green-500 text-white rounded-br-none"
                                                                                                                                                      : "bg-white text-gray-800 rounded-bl-none"
                                                                                                    }`}
                                                                                                              >
                                                                                                                          {msg.text}
                                                                                                                                    </div>
                                                                                                                                            </motion.div>
          ))}
              </CardContent>

                  {/* Input Area */}
                      <div className="p-3 flex items-center gap-2 border-t bg-white rounded-b-2xl">
                            <Input
                                    value={input}
                                            onChange={(e) => setInput(e.target.value)}
                                                    placeholder="Type a message"
                                                            className="flex-1 rounded-full"
                                                                    onKeyDown={(e) => e.key === "Enter" && sendMessage()}
                                                                          />
                                                                                <Button
                                                                                        onClick={sendMessage}
                                                                                                className="rounded-full p-2 bg-green-600 hover:bg-green-700"
                                                                                                      >
                                                                                                              <Send size={18} />
                                                                                                                    </Button>
                                                                                                                        </div>
                                                                                                                          </Card>
                                                                                                                          </div>

); }
                                                                                                    }}
                                                                      }}
          ))})}