62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { Link, useNavigate } from "react-router-dom";
|
|
import ShareButton from "./ShareButton";
|
|
import LangSwitch from "./LangSwitch";
|
|
import { type Lang, dict } from "@/lib/i18n";
|
|
|
|
type Share = { url: string; title: string; text: string };
|
|
|
|
// 브랜드 헤더 (대시보드·상세 공용). 경기별 후킹 카피는 상세 페이지에서 별도 노출.
|
|
export default function Hero({
|
|
back = false,
|
|
share,
|
|
lang = "ko",
|
|
}: {
|
|
back?: boolean;
|
|
share?: Share;
|
|
lang?: Lang;
|
|
}) {
|
|
const t = dict(lang);
|
|
const navigate = useNavigate();
|
|
const home = lang === "en" ? "/?lang=en" : "/";
|
|
// 뒤로가기: 앱 내 이력이 있으면 직전 페이지로 그대로 복귀(전체 일정의 선택 날짜 보존),
|
|
// 없으면(공유 링크로 직접 진입 등) 전체 일정으로 이동.
|
|
const goBack = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
const idx = (window.history.state?.idx as number | undefined) ?? 0;
|
|
if (idx > 0) navigate(-1);
|
|
else navigate(home);
|
|
};
|
|
return (
|
|
<header className="pt-5 text-center">
|
|
{back && (
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<Link
|
|
to={home}
|
|
onClick={goBack}
|
|
className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
|
|
>
|
|
{t.back}
|
|
</Link>
|
|
{share && (
|
|
<ShareButton {...share} label={t.share} copiedLabel={t.shareCopied} />
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="font-impact text-[44px] leading-none tracking-tight">
|
|
TRIPLE PICK <span className="text-[var(--green)]">2026</span>
|
|
</div>
|
|
<div className="relative mt-2">
|
|
<div className="text-[16px] font-extrabold text-[var(--green)]">
|
|
AI Prediction Arena
|
|
</div>
|
|
<div className="absolute right-0 top-1/2 -translate-y-1/2">
|
|
<LangSwitch lang={lang} />
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 inline-block rounded-full border border-white/12 bg-white/8 px-3 py-1 text-[13px] font-semibold text-white/85">
|
|
{t.heroPill}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|