81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { Heart, MessageCircle, Share2, Trash2 } from "lucide-react";
|
|
|
|
function generateFavorites() {
|
|
const characters = [
|
|
{ id: 1, name: "Luna", avatar: "🌙", category: "Fantasy", messages: 250 },
|
|
{ id: 2, name: "Alex", avatar: "⚡", category: "Sci-Fi", messages: 180 },
|
|
{ id: 3, name: "Sage", avatar: "🧙", category: "Fantasy", messages: 340 },
|
|
];
|
|
return characters;
|
|
}
|
|
|
|
export default function FavoritesPage() {
|
|
const favorites = generateFavorites();
|
|
|
|
return (
|
|
<div className="p-6 max-w-4xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold mb-2">Favorites</h1>
|
|
<p className="text-gray-600">{favorites.length} favorite characters</p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{favorites.map((char) => (
|
|
<div
|
|
key={char.id}
|
|
className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition"
|
|
>
|
|
{/* Character Card */}
|
|
<div className="h-48 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 flex items-center justify-center relative group">
|
|
<span className="text-6xl">{char.avatar}</span>
|
|
<button className="absolute top-2 right-2 p-2 bg-white rounded-lg opacity-0 group-hover:opacity-100 transition">
|
|
<Heart className="w-5 h-5 fill-red-600 text-red-600" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4 space-y-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold">{char.name}</h3>
|
|
<p className="text-sm text-gray-600">{char.category} Character</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex gap-4 text-sm text-gray-600 pb-4 border-b border-gray-200">
|
|
<div className="flex items-center gap-1">
|
|
<MessageCircle className="w-4 h-4" />
|
|
<span>{char.messages} messages</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
<button className="flex-1 bg-black text-white py-2 rounded-lg font-medium hover:bg-gray-800 transition text-sm">
|
|
Continue Chat
|
|
</button>
|
|
<button className="p-2 hover:bg-gray-100 rounded-lg transition">
|
|
<Share2 className="w-5 h-5" />
|
|
</button>
|
|
<button className="p-2 hover:bg-red-100 text-red-600 rounded-lg transition">
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{favorites.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<p className="text-gray-600">No favorite characters yet</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|