Skip to content

Deployment of High-Performance UI Enhancement for Lost and Found Page with Optimized Navigation & Interactive Components #846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HarshS16 merged 1 commit into from
Aug 25, 2025
Merged

Deployment of High-Performance UI Enhancement for Lost and Found Page with Optimized Navigation & Interactive Components #846

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 59 additions & 63 deletions src/Pages/Lost&Found.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,37 +45,37 @@ export default function LostAndFoundPage() {
});

return (
<div className="min-h-screen bg-gradient-to-br from-green-25 via-white to-green-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-green-950/10 relative p-6">
{/* Background orbs */}
<div className="absolute top-20 right-16 w-72 h-72 bg-green-200/10 dark:bg-green-400/5 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-32 left-20 w-64 h-64 bg-green-300/15 dark:bg-green-500/8 rounded-full blur-3xl animate-pulse delay-1000"></div>
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50 dark:from-emerald-950 dark:via-gray-900 dark:to-green-950 relative py-10 px-4">
{/* Decorative background */}
<div className="absolute top-20 right-16 w-72 h-72 bg-emerald-200/20 dark:bg-green-400/10 rounded-full blur-3xl pointer-events-none animate-pulse"></div>
<div className="absolute bottom-32 left-20 w-60 h-60 bg-emerald-200/15 dark:bg-green-500/8 rounded-full blur-3xl pointer-events-none animate-pulse delay-1000"></div>

<div className="relative z-10 max-w-7xl mx-auto">
{/* Header */}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10">
<div>
<h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 via-green-700 to-green-800 dark:from-white dark:via-green-300 dark:to-green-400 bg-clip-text text-transparent mb-2">
<h1 className="text-4xl font-extrabold bg-gradient-to-r from-emerald-800 via-green-600 to-teal-500 dark:from-white dark:via-green-300 dark:to-green-400 bg-clip-text text-transparent mb-2 tracking-tight">
Lost & Found
</h1>
<p className="text-gray-600 dark:text-gray-400">Help reunite people with their belongings</p>
<p className="text-green-800/80 dark:text-green-200/80 font-medium">Help reunite people with their belongings</p>
</div>
<button
onClick={() => setShowForm(true)}
className="mt-4 sm:mt-0 group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-medium rounded-xl shadow-lg shadow-green-600/25 hover:shadow-green-700/30 transition-all duration-200 transform hover:scale-105"
className="mt-5 sm:mt-0 group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-semibold rounded-xl shadow-lg hover:shadow-emerald-600/40 transition hover:scale-[1.04]"
>
<Plus className="w-5 h-5 transition-transform group-hover:rotate-90" />
<Plus className="w-5 h-5 group-hover:rotate-90 transition" />
Add Item
</button>
</div>

{/* Search & Tabs */}
<div className="flex flex-col lg:flex-row gap-4 mb-8">
<div className="flex flex-col lg:flex-row gap-4 mb-10">
<div className="relative flex-1">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-emerald-400 w-5 h-5" />
<input
type="text"
placeholder="Search items by name or description..."
className="w-full pl-12 pr-4 py-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 dark:focus:border-green-500 transition-all duration-200 shadow-sm"
className="w-full pl-12 pr-4 py-4 bg-white/70 dark:bg-emerald-900/80 backdrop-blur border border-emerald-100/70 dark:border-emerald-900/50 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-500 font-medium shadow focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
Expand All @@ -89,13 +89,13 @@ export default function LostAndFoundPage() {
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`px-5 py-3 rounded-xl font-medium transition-all duration-200 ${
className={`px-5 py-3 rounded-xl font-semibold transition-all duration-200 ${
activeTab === tab.key
? "bg-green-600 text-white shadow-lg shadow-green-600/25"
: "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-950/30 border border-green-200/50 dark:border-green-700/50"
? "bg-gradient-to-r from-emerald-500 to-green-400 text-white shadow-lg"
: "bg-white/80 dark:bg-emerald-900/70 text-emerald-700 dark:text-emerald-200 border border-emerald-100/50 dark:border-emerald-900/20 hover:bg-emerald-50 dark:hover:bg-emerald-900/40"
}`}
>
<span className="mr-2">{tab.emoji}</span>
<span className="mr-1">{tab.emoji}</span>
{tab.label}
</button>
))}
Expand All @@ -104,63 +104,62 @@ export default function LostAndFoundPage() {

{/* Items Grid */}
{filteredItems.length === 0 ? (
<div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl border border-green-200/50 dark:border-green-700/50 p-16 text-center">
<div className="w-20 h-20 bg-green-100 dark:bg-green-900/50 rounded-2xl flex items-center justify-center mx-auto mb-6">
<Search className="w-10 h-10 text-green-600 dark:text-green-400" />
<div className="bg-white/90 dark:bg-emerald-900/95 rounded-3xl border border-emerald-100/70 dark:border-emerald-900/40 p-16 text-center shadow-lg">
<div className="w-20 h-20 bg-emerald-100 dark:bg-emerald-900/70 rounded-2xl flex items-center justify-center mx-auto mb-6">
<Search className="w-10 h-10 text-emerald-600 dark:text-emerald-400" />
</div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No items found</h3>
<p className="text-gray-600 dark:text-gray-400">Be the first to add a lost or found item!</p>
<h3 className="text-xl font-bold text-emerald-800 dark:text-emerald-100 mb-1.5">No items found</h3>
<p className="text-emerald-700/80 dark:text-emerald-300/80">Be the first to add a lost or found item!</p>
</div>
) : (
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
{filteredItems.map((item) => (
<div
key={item.id}
className="group bg-white/90 dark:bg-gray-900/90 backdrop-blur-md rounded-2xl p-6 border border-green-200/50 dark:border-green-700/50 hover:border-green-300 dark:hover:border-green-600 hover:shadow-lg hover:shadow-green-100/20 dark:hover:shadow-green-900/10 transition-all duration-300 hover:-translate-y-1"
className="group bg-white/95 dark:bg-emerald-950/80 border border-emerald-100/70 dark:border-emerald-900/50 rounded-2xl p-7 shadow-lg hover:shadow-emerald-100/10 dark:hover:shadow-emerald-900/20 transition hover:-translate-y-1"
>
<div className="flex items-start justify-between mb-4">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
<div className="flex items-start justify-between mb-3">
<h3 className="text-lg font-extrabold text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-900 dark:group-hover:text-green-200 transition">
{item.name}
</h3>
<span className={`px-3 py-1 text-xs font-semibold rounded-full ${
<span className={`px-4 py-1 text-xs font-bold rounded-full ${
item.type === "lost"
? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300"
: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
? "bg-gradient-to-r from-red-200 to-red-400 text-red-900"
: "bg-gradient-to-r from-green-200 to-green-400 text-emerald-900"
}`}>
{item.type.toUpperCase()}
</span>
</div>

<p className="text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">{item.description}</p>

<div className="space-y-3 text-sm">
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
<div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<MapPin className="w-4 h-4 text-green-600 dark:text-green-400" />

<p className="text-gray-600 dark:text-emerald-200 mb-4 line-clamp-2">{item.description}</p>
<div className="space-y-3 text-xs font-medium">
<div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
<div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
<MapPin className="w-4 h-4" />
</div>
<span className="truncate">{item.location}</span>
</div>
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
<div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<Calendar className="w-4 h-4 text-green-600 dark:text-green-400" />
<div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
<div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
<Calendar className="w-4 h-4" />
</div>
<span>{item.date}</span>
</div>
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
<div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<User className="w-4 h-4 text-green-600 dark:text-green-400" />
<div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
<div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
<User className="w-4 h-4" />
</div>
<span className="truncate">{item.contactName}</span>
</div>
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
<div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<Phone className="w-4 h-4 text-green-600 dark:text-green-400" />
<div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
<div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
<Phone className="w-4 h-4" />
</div>
<span className="font-mono">{item.contactPhone}</span>
</div>
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
<div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<Mail className="w-4 h-4 text-green-600 dark:text-green-400" />
<div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
<div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
<Mail className="w-4 h-4" />
</div>
<span className="truncate">{item.contactEmail}</span>
</div>
Expand All @@ -173,19 +172,18 @@ export default function LostAndFoundPage() {
{/* Form Modal */}
{showForm && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50 p-4">
<div className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded-3xl shadow-2xl p-8 w-full max-w-md border border-green-200/50 dark:border-green-700/50">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Add New Item</h2>
<div className="bg-white/95 dark:bg-emerald-950/95 backdrop-blur-md rounded-3xl shadow-2xl p-8 w-full max-w-md border border-emerald-100/70 dark:border-emerald-900/40">
<div className="flex items-center justify-between mb-7">
<h2 className="text-2xl font-bold text-emerald-900 dark:text-white">Add New Item</h2>
<button
onClick={() => setShowForm(false)}
className="w-10 h-10 bg-gray-100 dark:bg-gray-800 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-xl flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-all duration-200"
className="w-10 h-10 bg-gray-100 dark:bg-emerald-900/80 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 transition"
>
<X className="w-5 h-5" />
</button>
</div>

<div className="space-y-4">
<div className="flex gap-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-xl">
<div className="flex gap-4 p-3 bg-emerald-50 dark:bg-green-900/30 rounded-xl">
{[
{ value: "lost", label: "πŸ˜” Lost", desc: "I lost something" },
{ value: "found", label: "πŸŽ‰ Found", desc: "I found something" }
Expand All @@ -201,16 +199,15 @@ export default function LostAndFoundPage() {
/>
<div className={`text-center p-3 rounded-lg border-2 transition-all ${
formData.type === option.value
? "border-green-500 bg-green-100 dark:bg-green-900/50"
: "border-gray-200 dark:border-gray-700 hover:border-green-300"
? "border-emerald-600 bg-emerald-50 dark:bg-emerald-900/70"
: "border-emerald-100 dark:border-emerald-800 hover:border-emerald-400"
}`}>
<div className="font-medium text-sm">{option.label}</div>
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">{option.desc}</div>
<div className="font-bold text-base">{option.label}</div>
<div className="text-xs text-emerald-500 dark:text-emerald-200">{option.desc}</div>
</div>
</label>
))}
</div>

{[
{ key: "name", type: "text", placeholder: "Item Name", required: true },
{ key: "description", type: "textarea", placeholder: "Description", required: true },
Expand All @@ -224,7 +221,7 @@ export default function LostAndFoundPage() {
{field.type === "textarea" ? (
<textarea
placeholder={field.placeholder}
className="w-full p-4 bg-white/80 dark:bg-gray-800/80 border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-200 resize-none h-24"
className="w-full p-4 bg-white/80 dark:bg-emerald-900/60 border border-emerald-100 dark:border-emerald-800 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 transition h-20 resize-none"
value={formData[field.key]}
onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
required={field.required}
Expand All @@ -233,19 +230,18 @@ export default function LostAndFoundPage() {
<input
type={field.type}
placeholder={field.placeholder}
className="w-full p-4 bg-white/80 dark:bg-gray-800/80 border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-200"
className="w-full p-4 bg-white/80 dark:bg-emerald-900/60 border border-emerald-100 dark:border-emerald-800 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 transition"
value={formData[field.key]}
onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
required={field.required}
/>
)}
</div>
))}

<button
type="button"
onClick={handleSubmit}
className="w-full py-4 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold rounded-xl shadow-lg shadow-green-600/25 hover:shadow-green-700/30 transition-all duration-200 transform hover:scale-105"
className="w-full py-4 mt-2 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-extrabold rounded-xl shadow-lg transition hover:scale-[1.03]"
>
Submit Item
</button>
Expand All @@ -256,4 +252,4 @@ export default function LostAndFoundPage() {
</div>
</div>
);
}
}