Initial commit: dating app web frontend (Next.js)
Phone+OTP auth, staged onboarding, admin-approval-gated home screen, and the full discovery/match/chat UI (swipe deck with drag gestures, match modal, profile detail, filters, messages/chat) wired to the real backend, styled after a Figma dating-app UI kit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ONBOARDING_STEPS } from "@/lib/onboarding-steps";
|
||||
|
||||
interface OnboardingScreenProps {
|
||||
order: number;
|
||||
title: string;
|
||||
emoji: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
export function OnboardingScreen({
|
||||
order,
|
||||
title,
|
||||
emoji,
|
||||
description,
|
||||
children,
|
||||
onBack,
|
||||
}: OnboardingScreenProps) {
|
||||
const router = useRouter();
|
||||
const total = ONBOARDING_STEPS.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 min-h-dvh">
|
||||
<div className="flex items-center gap-3 px-5 pt-[calc(env(safe-area-inset-top)+16px)] pb-2">
|
||||
<button
|
||||
onClick={onBack ?? (() => router.back())}
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center hover:bg-(--color-bg-secondary) shrink-0"
|
||||
aria-label="بازگشت"
|
||||
>
|
||||
<ChevronRight size={20} className="text-(--color-content-secondary)" />
|
||||
</button>
|
||||
<div className="flex-1 flex gap-1.5">
|
||||
{ONBOARDING_STEPS.map((s) => (
|
||||
<div
|
||||
key={s.key}
|
||||
className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 ${
|
||||
s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-[11px] font-bold text-(--color-content-tertiary) shrink-0">
|
||||
{order}/{total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 px-6 pt-6 pb-2">
|
||||
<h1 className="font-[var(--font-display)] font-extrabold text-[24px] text-(--color-content-primary) leading-snug">
|
||||
{title} <span>{emoji}</span>
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="text-[14px] text-(--color-content-secondary) leading-6">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 px-6 py-4 overflow-y-auto pb-[calc(env(safe-area-inset-bottom)+24px)]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { TextField } from "@/components/ui/TextField";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { submitBasicInfo, FullProfile } from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
|
||||
export function BasicInfoStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
}: {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
const [gender, setGender] = useState<"male" | "female" | null>(
|
||||
initialProfile?.user.gender ?? null
|
||||
);
|
||||
const [firstName, setFirstName] = useState(initialProfile?.user.first_name ?? "");
|
||||
const [birthDate, setBirthDate] = useState(initialProfile?.user.birth_date ?? "");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isValid = gender && firstName.trim().length >= 2 && birthDate;
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid || !gender) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await submitBasicInfo({ gender, first_name: firstName.trim(), birth_date: birthDate });
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-[13px] font-semibold text-(--color-content-secondary) px-1">
|
||||
جنسیت
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{(["female", "male"] as const).map((g) => (
|
||||
<button
|
||||
key={g}
|
||||
onClick={() => setGender(g)}
|
||||
className={cn(
|
||||
"h-14 rounded-(--radius-md) border-2 font-bold text-[15px] transition-all",
|
||||
gender === g
|
||||
? "bg-(--color-brand-500) border-(--color-brand-500) text-white shadow-(--shadow-cute-sm)"
|
||||
: "bg-(--color-surface-default) border-(--color-border-default) text-(--color-content-secondary)"
|
||||
)}
|
||||
>
|
||||
{g === "female" ? "زن 👩" : "مرد 👨"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
label="اسم کوچیکت چیه؟"
|
||||
placeholder="مثلاً سارا"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="تاریخ تولد"
|
||||
type="date"
|
||||
value={birthDate}
|
||||
onChange={(e) => setBirthDate(e.target.value)}
|
||||
/>
|
||||
|
||||
<ErrorBanner message={error} />
|
||||
|
||||
<Button size="lg" isBlock disabled={!isValid} isLoading={loading} onClick={handleSubmit}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { TextField } from "@/components/ui/TextField";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { submitBodyInfo, FullProfile } from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
|
||||
export function BodyInfoStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
}: {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
const [height, setHeight] = useState(
|
||||
initialProfile?.user.height_cm?.toString() ?? ""
|
||||
);
|
||||
const [weight, setWeight] = useState(
|
||||
initialProfile?.user.weight_kg?.toString() ?? ""
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const h = parseInt(height, 10);
|
||||
const w = parseInt(weight, 10);
|
||||
const isValid = h >= 100 && h <= 250 && w >= 30 && w <= 250;
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await submitBodyInfo({ height_cm: h, weight_kg: w });
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<TextField
|
||||
label="قد (سانتیمتر)"
|
||||
type="number"
|
||||
placeholder="مثلاً 172"
|
||||
value={height}
|
||||
onChange={(e) => setHeight(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="وزن (کیلوگرم)"
|
||||
type="number"
|
||||
placeholder="مثلاً 65"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(e.target.value)}
|
||||
/>
|
||||
<ErrorBanner message={error} />
|
||||
<Button size="lg" isBlock disabled={!isValid} isLoading={loading} onClick={handleSubmit}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
|
||||
import { OptionPicker } from "@/components/ui/OptionPicker";
|
||||
import { getOptions, submitEducation, Option, FullProfile } from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
|
||||
function findSelection(profile: FullProfile | null, key: string): number[] {
|
||||
return profile?.selections.find((s) => s.category_key === key)?.option_ids ?? [];
|
||||
}
|
||||
|
||||
export function EducationStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
}: {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
const [levelOptions, setLevelOptions] = useState<Option[] | null>(null);
|
||||
const [fieldOptions, setFieldOptions] = useState<Option[] | null>(null);
|
||||
const [levelId, setLevelId] = useState<number[]>(
|
||||
findSelection(initialProfile, "education_level")
|
||||
);
|
||||
const [fieldId, setFieldId] = useState<number[]>(
|
||||
findSelection(initialProfile, "field_of_study")
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([getOptions("education_level"), getOptions("field_of_study")])
|
||||
.then(([lvl, field]) => {
|
||||
setLevelOptions(lvl);
|
||||
setFieldOptions(field);
|
||||
})
|
||||
.catch((err) => setError(formatApiError(err)));
|
||||
}, []);
|
||||
|
||||
const isValid = levelId.length === 1 && fieldId.length === 1;
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await submitEducation({
|
||||
education_level_option_id: levelId[0],
|
||||
field_of_study_option_id: fieldId[0],
|
||||
});
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!levelOptions || !fieldOptions) return <FullScreenLoader label="گزینهها رو میاریم..." />;
|
||||
|
||||
if (levelOptions.length === 0 || fieldOptions.length === 0) {
|
||||
return (
|
||||
<ErrorBanner message="هنوز گزینهای برای تحصیلات توی پنل ادمین ثبت نشده. اول باید ادمین اینها رو اضافه کنه." />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-7">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="text-[13px] font-semibold text-(--color-content-secondary) px-1">
|
||||
سطح تحصیلات
|
||||
</label>
|
||||
<OptionPicker options={levelOptions} selectedIds={levelId} onChange={setLevelId} mode="single" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="text-[13px] font-semibold text-(--color-content-secondary) px-1">
|
||||
رشته تحصیلی
|
||||
</label>
|
||||
<OptionPicker options={fieldOptions} selectedIds={fieldId} onChange={setFieldId} mode="single" />
|
||||
</div>
|
||||
|
||||
<ErrorBanner message={error} />
|
||||
|
||||
<Button size="lg" isBlock disabled={!isValid} isLoading={loading} onClick={handleSubmit}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
|
||||
import { OptionPicker } from "@/components/ui/OptionPicker";
|
||||
import { getOptions, CategoryKey, FullProfile } from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
|
||||
interface GenericOptionStepProps {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
category: CategoryKey;
|
||||
mode: "single" | "multi";
|
||||
min: number;
|
||||
max?: number;
|
||||
submitFn: (ids: number[]) => Promise<unknown>;
|
||||
helperText?: string;
|
||||
emptyMessage: string;
|
||||
}
|
||||
|
||||
export function GenericOptionStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
category,
|
||||
mode,
|
||||
min,
|
||||
max,
|
||||
submitFn,
|
||||
helperText,
|
||||
emptyMessage,
|
||||
}: GenericOptionStepProps) {
|
||||
const [options, setOptions] = useState<
|
||||
Awaited<ReturnType<typeof getOptions>> | null
|
||||
>(null);
|
||||
const [selectedIds, setSelectedIds] = useState<number[]>(
|
||||
initialProfile?.selections.find((s) => s.category_key === category)?.option_ids ?? []
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getOptions(category)
|
||||
.then(setOptions)
|
||||
.catch((err) => setError(formatApiError(err)));
|
||||
}, [category]);
|
||||
|
||||
const isValid = selectedIds.length >= min && (max ? selectedIds.length <= max : true);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await submitFn(selectedIds);
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!options) return <FullScreenLoader label="گزینهها رو میاریم..." />;
|
||||
|
||||
if (options.length === 0) {
|
||||
return <ErrorBanner message={emptyMessage} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{helperText && (
|
||||
<p className="text-[13px] font-semibold text-(--color-content-secondary)">
|
||||
{helperText} {max ? `(${selectedIds.length}/${max})` : ""}
|
||||
</p>
|
||||
)}
|
||||
<OptionPicker
|
||||
options={options}
|
||||
selectedIds={selectedIds}
|
||||
onChange={setSelectedIds}
|
||||
mode={mode}
|
||||
max={max}
|
||||
/>
|
||||
<ErrorBanner message={error} />
|
||||
<Button size="lg" isBlock disabled={!isValid} isLoading={loading} onClick={handleSubmit}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
getAvailableQuestions,
|
||||
submitProfileQuestions,
|
||||
ProfileQuestion,
|
||||
FullProfile,
|
||||
} from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
const REQUIRED = 3;
|
||||
|
||||
export function ProfileQuestionsStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
}: {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
const [questions, setQuestions] = useState<ProfileQuestion[] | null>(null);
|
||||
const [selectedIds, setSelectedIds] = useState<number[]>(
|
||||
initialProfile?.profile_answers.map((a) => a.question_id) ?? []
|
||||
);
|
||||
const [answers, setAnswers] = useState<Record<number, string>>(() => {
|
||||
const map: Record<number, string> = {};
|
||||
initialProfile?.profile_answers.forEach((a) => {
|
||||
map[a.question_id] = a.answer;
|
||||
});
|
||||
return map;
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getAvailableQuestions()
|
||||
.then(setQuestions)
|
||||
.catch((err) => setError(formatApiError(err)));
|
||||
}, []);
|
||||
|
||||
function toggleQuestion(id: number) {
|
||||
setSelectedIds((prev) => {
|
||||
if (prev.includes(id)) return prev.filter((x) => x !== id);
|
||||
if (prev.length >= REQUIRED) return prev;
|
||||
return [...prev, id];
|
||||
});
|
||||
}
|
||||
|
||||
const allAnswered =
|
||||
selectedIds.length === REQUIRED &&
|
||||
selectedIds.every((id) => (answers[id] ?? "").trim().length > 0);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!allAnswered) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await submitProfileQuestions(
|
||||
selectedIds.map((id) => ({ question_id: id, answer: answers[id].trim() }))
|
||||
);
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!questions) return <FullScreenLoader label="سوالات رو میاریم..." />;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
<p className="text-[13px] font-semibold text-(--color-content-secondary)">
|
||||
دقیقاً {REQUIRED} تا انتخاب کن ({selectedIds.length}/{REQUIRED})
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{questions.map((q) => {
|
||||
const selected = selectedIds.includes(q.id);
|
||||
const disabled = !selected && selectedIds.length >= REQUIRED;
|
||||
return (
|
||||
<button
|
||||
key={q.id}
|
||||
onClick={() => toggleQuestion(q.id)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"flex items-center gap-3 text-right rounded-(--radius-md) border-2 px-4 py-3.5 transition-all",
|
||||
selected
|
||||
? "border-(--color-brand-500) bg-(--color-brand-50)"
|
||||
: "border-(--color-border-default) bg-(--color-surface-default)",
|
||||
disabled && "opacity-40"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"w-6 h-6 rounded-full flex items-center justify-center shrink-0 border-2",
|
||||
selected
|
||||
? "bg-(--color-brand-500) border-(--color-brand-500)"
|
||||
: "border-(--color-border-default)"
|
||||
)}
|
||||
>
|
||||
{selected && <Check size={14} className="text-white" strokeWidth={3} />}
|
||||
</span>
|
||||
<span className="text-[14px] text-(--color-content-primary)">{q.text}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex flex-col gap-4 pt-2">
|
||||
{selectedIds.map((id) => {
|
||||
const q = questions.find((qq) => qq.id === id);
|
||||
if (!q) return null;
|
||||
return (
|
||||
<div key={id} className="flex flex-col gap-1.5">
|
||||
<label className="text-[13px] font-semibold text-(--color-content-secondary) px-1">
|
||||
{q.text}
|
||||
</label>
|
||||
<textarea
|
||||
value={answers[id] ?? ""}
|
||||
onChange={(e) =>
|
||||
setAnswers((prev) => ({ ...prev, [id]: e.target.value }))
|
||||
}
|
||||
rows={3}
|
||||
placeholder="جواب بده..."
|
||||
className="rounded-(--radius-sm) border-2 border-(--color-border-default) bg-(--color-surface-default) px-4 py-3 text-[14px] focus:outline-none focus:border-(--color-border-interactive) focus:ring-4 focus:ring-(--color-brand-100) resize-none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ErrorBanner message={error} />
|
||||
|
||||
<Button size="lg" isBlock disabled={!allAnswered} isLoading={loading} onClick={handleSubmit}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user