74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ArrowLeft, Check, RefreshCw } from "lucide-react";
|
||
|
|
import { BoothConfig } from "@/types/booth";
|
||
|
|
import { useI18n } from "@/lib/i18n";
|
||
|
|
import { MascotGuide } from "@/components/MascotGuide";
|
||
|
|
|
||
|
|
interface ConfirmScreenProps {
|
||
|
|
config: BoothConfig;
|
||
|
|
photoUrl: string;
|
||
|
|
onConfirm: () => void;
|
||
|
|
onRetake: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ConfirmScreen: React.FC<ConfirmScreenProps> = ({
|
||
|
|
config,
|
||
|
|
photoUrl,
|
||
|
|
onConfirm,
|
||
|
|
onRetake,
|
||
|
|
}) => {
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative flex-1 flex flex-col items-center justify-between p-3 sm:p-4 overflow-hidden select-none">
|
||
|
|
{/* Top Header - Back/Retake button on top left, title removed */}
|
||
|
|
<div className="w-full flex items-center justify-between px-1 mb-1 z-30 min-h-[40px]">
|
||
|
|
<button
|
||
|
|
onClick={onRetake}
|
||
|
|
className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
|
||
|
|
>
|
||
|
|
<ArrowLeft size={16} className="stroke-[3]" />
|
||
|
|
<span>{t(config.labels.retakeButton)}</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="w-16" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Captured Photo Preview Card */}
|
||
|
|
<div className="relative w-full max-w-sm aspect-[9/16] rounded-3xl overflow-hidden bg-black border-4 border-black shadow-[0_8px_0_#090314,0_0_25px_rgba(255,109,0,0.3)] flex items-center justify-center my-auto">
|
||
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
|
|
<img
|
||
|
|
src={photoUrl}
|
||
|
|
alt="Captured Pose"
|
||
|
|
className="w-full h-full object-cover select-none"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Mascot Comic Callout in preview */}
|
||
|
|
<div className="absolute -bottom-2 -left-2 sm:bottom-1 sm:left-1 pointer-events-none z-20">
|
||
|
|
<MascotGuide
|
||
|
|
pose="bow"
|
||
|
|
size="md"
|
||
|
|
speechPosition="right"
|
||
|
|
speechText={{
|
||
|
|
en: "Epic martial focus! Ready to pick your style?",
|
||
|
|
zh: "气势十足！准备好选择你的万圣风格了吗？",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bottom Action Bar - Single centered button matching Standby Screen style */}
|
||
|
|
<div className="w-full max-w-sm flex items-center justify-center py-2 z-20 min-h-[70px]">
|
||
|
|
<button
|
||
|
|
onClick={onConfirm}
|
||
|
|
className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg active:scale-95"
|
||
|
|
>
|
||
|
|
<Check size={17} className="stroke-[3]" />
|
||
|
|
<span>{t(config.labels.confirmButton)}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|