Spaces:
Running
Running
File size: 8,470 Bytes
4666526 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
const App = () => {
const [parties, setParties] = React.useState([
{
id: 1,
title: "Beach Bonanza",
date: "2023-07-15",
location: "Santa Monica Beach",
host: "Alex Johnson",
attendees: 12,
items: ["Cooler", "Beach Towels", "Snacks", "Sunscreen"]
},
{
id: 2,
title: "Housewarming Party",
date: "2023-08-02",
location: "123 Main St",
host: "Jamie Smith",
attendees: 25,
items: ["Appetizers", "Drinks", "Dessert", "Games"]
}
]);
const [activeTab, setActiveTab] = React.useState('create');
const createNewParty = (e) => {
e.preventDefault();
const form = e.target;
const newParty = {
id: parties.length + 1,
title: form.title.value,
date: form.date.value,
location: form.location.value,
host: "You",
attendees: 0,
items: form.items.value.split(',').map(item => item.trim())
};
setParties([...parties, newParty]);
form.reset();
setActiveTab('view');
};
return (
<div className="space-y-8">
<div className="text-center">
<h1 className="text-4xl font-bold text-purple-800 mb-2">Party Planner Pro</h1>
<p className="text-lg text-purple-600">Plan your perfect party and coordinate with friends!</p>
</div>
<div className="flex justify-center gap-4 mb-8">
<button
onClick={() => setActiveTab('create')}
className={`px-6 py-2 rounded-full font-medium ${activeTab === 'create' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'}`}
>
Create Party
</button>
<button
onClick={() => setActiveTab('view')}
className={`px-6 py-2 rounded-full font-medium ${activeTab === 'view' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'}`}
>
View Parties
</button>
</div>
{activeTab === 'create' ? (
<div className="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
<h2 className="text-2xl font-bold text-purple-800 mb-6">Create New Party</h2>
<form onSubmit={createNewParty} className="space-y-4">
<div>
<label className="block text-purple-700 mb-1">Party Title</label>
<input
type="text"
name="title"
required
className="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div>
<label className="block text-purple-700 mb-1">Date</label>
<input
type="date"
name="date"
required
className="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div>
<label className="block text-purple-700 mb-1">Location</label>
<input
type="text"
name="location"
required
className="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div>
<label className="block text-purple-700 mb-1">Items Needed (comma separated)</label>
<textarea
name="items"
placeholder="e.g., Drinks, Snacks, Plates, Cups"
className="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
></textarea>
</div>
<button
type="submit"
className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200"
>
Create Party
</button>
</form>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{parties.map(party => (
<div key={party.id} className="party-card bg-white rounded-xl shadow-md overflow-hidden">
<div className="p-6">
<div className="flex justify-between items-start mb-2">
<h3 className="text-xl font-bold text-purple-800">{party.title}</h3>
<span className="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
{party.attendees} attending
</span>
</div>
<p className="text-gray-600 mb-4">
<i data-feather="calendar" className="inline mr-2 w-4 h-4"></i>
{new Date(party.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
</p>
<p className="text-gray-600 mb-4">
<i data-feather="map-pin" className="inline mr-2 w-4 h-4"></i>
{party.location}
</p>
<p className="text-gray-600 mb-4">
<i data-feather="user" className="inline mr-2 w-4 h-4"></i>
Hosted by {party.host}
</p>
<div className="mb-4">
<h4 className="font-medium text-purple-700 mb-2">Items to bring:</h4>
<ul className="space-y-2">
{party.items.map((item, index) => (
<li key={index} className="flex items-center">
<input type="checkbox" id={`item-${party.id}-${index}`} className="mr-2"/>
<label htmlFor={`item-${party.id}-${index}`}>{item}</label>
</li>
))}
</ul>
</div>
<div className="flex justify-between mt-6">
<button className="text-purple-600 hover:text-purple-800 font-medium flex items-center">
<i data-feather="share-2" className="mr-2 w-4 h-4"></i>
Share
</button>
<button className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200">
Join Party
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(<App />); |