mirror of
https://github.com/EdiFarcas/Giveaway-app.git
synced 2026-06-22 07:00:57 +03:00
Updated UI for each page
This commit is contained in:
EdiFarcas
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
@@ -37,81 +37,85 @@ export default function AdminClient({ email }: AdminClientProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-black py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto space-y-8">
|
||||
<h1 className="text-3xl font-bold">Admin Page</h1>
|
||||
<p>Welcome, {email}!</p>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 text-black py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto space-y-10">
|
||||
<h1 className="text-4xl font-bold text-pink-700">Admin Dashboard</h1>
|
||||
<p className="text-lg text-gray-700">Welcome, <span className="font-medium">{email}</span>!</p>
|
||||
|
||||
{/* Create Giveaway Form */}
|
||||
<div className="p-4 text-white bg-gray-800 shadow rounded">
|
||||
<h2 className="text-xl font-semibold">Create Giveaway</h2>
|
||||
<div className="bg-white border border-pink-200 p-6 rounded-2xl shadow-lg">
|
||||
<h2 className="text-2xl font-semibold text-pink-700 mb-4">🎁 Create Giveaway</h2>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
value={giveaway.title}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
type="text"
|
||||
placeholder="Giveaway Title"
|
||||
value={giveaway.title}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
|
||||
className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description"
|
||||
value={giveaway.description}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
placeholder="Description"
|
||||
value={giveaway.description}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
|
||||
className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Prize"
|
||||
value={giveaway.prize}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
type="text"
|
||||
placeholder="Prize"
|
||||
value={giveaway.prize}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
|
||||
className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Value in Coins"
|
||||
value={giveaway.value || ""}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
type="number"
|
||||
placeholder="Value in Coins"
|
||||
value={giveaway.value || ""}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
|
||||
className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
placeholder="Ends At"
|
||||
value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
type="datetime-local"
|
||||
placeholder="Ends At"
|
||||
value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
|
||||
onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
|
||||
className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateGiveaway}
|
||||
className="mt-4 bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
Create Giveaway
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Update User Coins Form */}
|
||||
<div className="p-4 text-white bg-gray-800 shadow rounded">
|
||||
<h2 className="text-xl font-semibold">Update User Coins</h2>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="YouTube Video URL"
|
||||
value={youtube_url}
|
||||
onChange={(e) => setYoutubeUrl(e.target.value)}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Coins"
|
||||
value={coin_value}
|
||||
onChange={(e) => setCoinValue(Number(e.target.value))}
|
||||
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleUpdateCoins(youtube_url, coin_value)}
|
||||
className="mt-4 bg-green-600 text-white px-4 py-2 rounded"
|
||||
onClick={handleCreateGiveaway}
|
||||
className="w-full bg-gradient-to-r from-pink-500 to-yellow-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
|
||||
>
|
||||
Update Coins
|
||||
🚀 Create Giveaway
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Update User Coins Form */}
|
||||
<div className="bg-white border border-green-200 p-6 rounded-2xl shadow-lg">
|
||||
<h2 className="text-2xl font-semibold text-green-700 mb-4">💸 Update User Coins</h2>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="YouTube Video URL"
|
||||
value={youtube_url}
|
||||
onChange={(e) => setYoutubeUrl(e.target.value)}
|
||||
className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Coins to Add"
|
||||
value={coin_value || ""}
|
||||
onChange={(e) => setCoinValue(Number(e.target.value))}
|
||||
className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleUpdateCoins(youtube_url, coin_value)}
|
||||
className="w-full bg-gradient-to-r from-green-500 to-lime-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
|
||||
>
|
||||
✅ Update Coins
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
+44
-30
@@ -23,37 +23,51 @@ export default async function GiveawaysPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 py-12 px-4 sm:px-6 lg:px-8 font-sans">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1>
|
||||
<div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{giveaways.map((giveaway) => {
|
||||
const remainingTime = Math.max(
|
||||
0,
|
||||
new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
|
||||
);
|
||||
|
||||
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
const hours = Math.floor(
|
||||
(remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
|
||||
const minutes = Math.floor(
|
||||
(remainingTime % (1000 * 60 * 60)) / (1000 * 60)
|
||||
);
|
||||
|
||||
return (
|
||||
<GiveawayCard
|
||||
key={giveaway.id}
|
||||
title={giveaway.title}
|
||||
description={`${giveaway.description} - Ends in: ${days}d ${hours}h ${minutes}m`}
|
||||
imageUrl={giveaway.prize} // Assuming prize is a URL to an image
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-10 text-center bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent drop-shadow-md">
|
||||
🎁 Active Giveaways
|
||||
</h1>
|
||||
|
||||
{/* Grid of Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-black">
|
||||
{giveaways.map((giveaway) => {
|
||||
const remainingTime = Math.max(
|
||||
0,
|
||||
new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
|
||||
);
|
||||
|
||||
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor(
|
||||
(remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
const minutes = Math.floor(
|
||||
(remainingTime % (1000 * 60 * 60)) / (1000 * 60)
|
||||
);
|
||||
|
||||
const countdownText =
|
||||
days > 0
|
||||
? `${days}d ${hours}h ${minutes}m left`
|
||||
: hours > 0
|
||||
? `${hours}h ${minutes}m left`
|
||||
: `${minutes}m left`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={giveaway.id}
|
||||
className="bg-white rounded-2xl shadow-lg border-2 border-pink-200 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<GiveawayCard
|
||||
title={giveaway.title}
|
||||
description={`${giveaway.description} — 🕒 ${countdownText}`}
|
||||
imageUrl={giveaway.prize}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -7,7 +7,7 @@ export default function GiveawaySystem() {
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<Image
|
||||
src="/logo-tcg-love.png"
|
||||
src="/images/logo-tcg-love.png"
|
||||
alt="TCG Love Openings Logo"
|
||||
width={120}
|
||||
height={120}
|
||||
|
||||
@@ -10,90 +10,79 @@ interface User {
|
||||
export default function ProfileClient({ user }: { user: User }) {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen bg-gradient-to-br from-pink-50 to-yellow-100 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="bg-black rounded-2xl shadow-xl overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-purple-600 to-blue-500 p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="h-16 w-16 bg-white rounded-full flex items-center justify-center">
|
||||
<span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
|
||||
{user.name?.[0]?.toUpperCase() || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">{user.name}</h1>
|
||||
<p className="text-purple-100">🌟 Premium Member</p>
|
||||
</div>
|
||||
<div className="rounded-3xl shadow-xl overflow-hidden bg-white border-4 border-pink-200">
|
||||
{/* Profile Header */}
|
||||
<div className="bg-gradient-to-r from-pink-600 to-yellow-500 p-6 flex items-center space-x-4">
|
||||
<div className="h-16 w-16 bg-white rounded-full shadow-lg flex items-center justify-center">
|
||||
<span className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-yellow-400 bg-clip-text text-transparent">
|
||||
{user.name?.[0]?.toUpperCase() || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white drop-shadow">{user.name}</h1>
|
||||
<p className="text-yellow-100 italic">🌟 Premium Member</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Profile Info & Wallet */}
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Info Block */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<span className="text-lg">👤</span>
|
||||
<div>
|
||||
<p className="text-sm text-black">Full Name</p>
|
||||
<p className="font-medium text-gray-500">{user.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<span className="text-lg">📧</span>
|
||||
<div>
|
||||
<p className="text-sm text-black">Email Address</p>
|
||||
<p className="font-medium text-gray-500">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<span className="text-lg">📺</span>
|
||||
<div>
|
||||
<p className="text-sm text-black">YouTube Handle</p>
|
||||
<p className="font-medium text-gray-500">{user.youtubeHandle}</p>
|
||||
</div>
|
||||
</div>
|
||||
{[["👤", "Full Name", user.name], ["📧", "Email Address", user.email], ["📺", "YouTube Handle", user.youtubeHandle]].map(
|
||||
([icon, label, value], index) => (
|
||||
<div key={index} className="flex items-center space-x-3 p-3 bg-white border border-pink-100 rounded-xl shadow-sm">
|
||||
<span className="text-xl">{icon}</span>
|
||||
<div>
|
||||
<p className="text-sm text-gray-700">{label}</p>
|
||||
<p className="font-medium text-gray-500">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 rounded-xl p-5">
|
||||
|
||||
{/* Wallet */}
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-5 shadow-inner">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-purple-600 mb-1">Available Balance</p>
|
||||
<p className="text-sm text-yellow-600 mb-1">Available Balance</p>
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<span className="text-lg">💰</span>
|
||||
<span className="text-2xl font-bold text-black">{user.coins}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
|
||||
<button className="bg-gradient-to-r from-yellow-400 to-pink-500 text-white px-4 py-2 rounded-xl hover:brightness-110 transition-all shadow-md">
|
||||
Add Coins
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<span className="text-xl mr-2">⭐</span>
|
||||
|
||||
{/* Achievements */}
|
||||
<div className="mt-10 pt-6 border-t border-pink-100">
|
||||
<h3 className="text-xl font-bold mb-4 flex items-center text-pink-700">
|
||||
<span className="text-2xl mr-2">⭐</span>
|
||||
Achievements
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600">5</div>
|
||||
<div className="text-sm text-gray-500">Completed Tasks</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600">12</div>
|
||||
<div className="text-sm text-gray-500">Active Days</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600">3</div>
|
||||
<div className="text-sm text-gray-500">Badges Earned</div>
|
||||
</div>
|
||||
{[
|
||||
["5", "Completed Tasks"],
|
||||
["12", "Active Days"],
|
||||
["3", "Badges Earned"],
|
||||
].map(([value, label], idx) => (
|
||||
<div key={idx} className="text-center p-4 bg-white rounded-xl shadow-sm border border-pink-100">
|
||||
<div className="text-2xl font-bold text-pink-600">{value}</div>
|
||||
<div className="text-sm text-gray-500">{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user