64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/i18n/navigation";
|
|
import Footer from "@/app/components/Footer";
|
|
|
|
const MOCK_GIGS = [
|
|
{ id: "1", title: "帮我 P 图", city: "大理", reward: "¥50", author: "林**" },
|
|
{ id: "2", title: "找惠州 loft 民宿", city: "深圳", reward: "¥100", author: "陈**" },
|
|
{ id: "3", title: "代收快递", city: "成都", reward: "¥30", author: "王**" },
|
|
{ id: "4", title: "一起 citywalk 拍 neo2 航拍", city: "杭州", reward: "面议", author: "张**" },
|
|
{ id: "5", title: "翻译英文文档", city: "上海", reward: "¥200", author: "李**" },
|
|
];
|
|
|
|
export default function GigsPage() {
|
|
const { t } = useTranslation("gigs");
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-12">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mt-1 text-gray-500 dark:text-gray-400">
|
|
{t("subtitle")} · {t("platformFee")}
|
|
</p>
|
|
</div>
|
|
<button className="shrink-0 px-6 py-3 rounded-xl bg-[#ff4d4f] text-white font-medium hover:bg-[#ff3333] transition-colors">
|
|
{t("publish")}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{MOCK_GIGS.map((gig) => (
|
|
<div
|
|
key={gig.id}
|
|
className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-gray-900 dark:text-gray-100">
|
|
{gig.title}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
📍 {gig.city} · {gig.author}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-lg font-semibold text-[#ff4d4f]">
|
|
{gig.reward}
|
|
</span>
|
|
<button className="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
{t("browse")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|