200 lines
7.8 KiB
TypeScript
200 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Link, useLocale, useTranslation } from "@/i18n/navigation";
|
|
import { cities } from "@/app/data/cities";
|
|
|
|
const CITY_OPTIONS = cities.map((c) => ({ value: c.name, label: `${c.icon} ${c.name}` }));
|
|
|
|
export default function HostMeetupPage() {
|
|
const { t } = useTranslation("hostMeetup");
|
|
const locale = useLocale();
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [form, setForm] = useState({
|
|
city: "",
|
|
date: "",
|
|
time: "19:00",
|
|
venue: "",
|
|
address: "",
|
|
description: "",
|
|
maxAttendees: "20",
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitted(true);
|
|
};
|
|
|
|
if (submitted) {
|
|
return (
|
|
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<main className="max-w-[600px] mx-auto px-4 sm:px-6 py-12 sm:py-20">
|
|
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-8 sm:p-12 text-center">
|
|
<span className="text-6xl mb-6 block">🎉</span>
|
|
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
|
{t("successTitle")}
|
|
</h2>
|
|
<p className="text-gray-500 dark:text-gray-400 mb-8">
|
|
{t("successDesc")}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Link
|
|
href="/meetups/host"
|
|
onClick={() => setSubmitted(false)}
|
|
className="px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
{t("createAnother")}
|
|
</Link>
|
|
<Link
|
|
href="/meetups"
|
|
className="px-6 py-3 rounded-xl bg-[#ff4d4f] text-white font-medium hover:bg-[#ff7a45] transition-colors"
|
|
>
|
|
{t("viewMeetups")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<main className="max-w-[640px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<header className="mb-8">
|
|
<Link
|
|
href="/meetups"
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-4"
|
|
>
|
|
← {t("backToMeetups")}
|
|
</Link>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
|
<span className="w-1 h-8 bg-[#ff4d4f] rounded-full" />
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm sm:text-base">
|
|
{t("subtitle")}
|
|
</p>
|
|
</header>
|
|
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 sm:p-8 space-y-6"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("city")} *
|
|
</label>
|
|
<select
|
|
required
|
|
value={form.city}
|
|
onChange={(e) => setForm((f) => ({ ...f, city: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
>
|
|
<option value="">{t("selectCity")}</option>
|
|
{CITY_OPTIONS.map((c) => (
|
|
<option key={c.value} value={c.value}>
|
|
{c.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("date")} *
|
|
</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
value={form.date}
|
|
onChange={(e) => setForm((f) => ({ ...f, date: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("time")} *
|
|
</label>
|
|
<input
|
|
type="time"
|
|
required
|
|
value={form.time}
|
|
onChange={(e) => setForm((f) => ({ ...f, time: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("venue")} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder={t("venuePlaceholder")}
|
|
value={form.venue}
|
|
onChange={(e) => setForm((f) => ({ ...f, venue: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("address")} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder={t("addressPlaceholder")}
|
|
value={form.address}
|
|
onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("description")}
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
placeholder={t("descriptionPlaceholder")}
|
|
value={form.description}
|
|
onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 resize-none"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t("maxAttendees")}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min={2}
|
|
max={100}
|
|
value={form.maxAttendees}
|
|
onChange={(e) => setForm((f) => ({ ...f, maxAttendees: e.target.value }))}
|
|
className="form-input w-full border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-400 dark:text-gray-500">
|
|
{t("demoHint")}
|
|
</p>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full py-3.5 rounded-xl bg-[#ff4d4f] text-white font-semibold hover:bg-[#ff7a45] transition-colors"
|
|
>
|
|
{t("submit")}
|
|
</button>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|