79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import { Image } from '@/components'
|
|
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
|
|
import { motion } from 'framer-motion'
|
|
import type { ReactNode } from 'react'
|
|
|
|
type UnlockHintDialogProps = {
|
|
title?: string
|
|
starName: string
|
|
visible: boolean
|
|
onClose: () => void
|
|
onShare?: () => void
|
|
children?: ReactNode
|
|
}
|
|
|
|
const UnlockHintDialog = ({
|
|
title,
|
|
starName,
|
|
visible,
|
|
onClose,
|
|
onShare,
|
|
children,
|
|
}: UnlockHintDialogProps) => {
|
|
return (
|
|
<motion.div
|
|
className="absolute inset-0 z-50 flex items-center justify-center"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: visible ? 1 : 0 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.18, ease: 'easeOut' }}
|
|
style={{
|
|
pointerEvents: visible ? 'auto' : 'none',
|
|
backgroundColor: 'rgba(132, 120, 100, 0.93)',
|
|
}}
|
|
>
|
|
{visible && (
|
|
<div
|
|
className="relative w-[1666px] h-[972px] bg-no-repeat bg-cover p-12 pl-4"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(
|
|
`${starName}/reflection/lobby/dialog/场景交互底板-最后一个`
|
|
),
|
|
}}
|
|
>
|
|
<Image
|
|
button
|
|
src={getStaticImage(`${starName}/reflection/lobby/dialog/按钮关闭2`)}
|
|
className="absolute -right-10 -top-8 z-10"
|
|
alt="关闭"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{title && (
|
|
<div className="flex justify-center items-center h-42">
|
|
<div className="w-3/4 text-4xl font-bold text-[#E0D2B3] text-center leading-14">
|
|
{title}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="h-[calc(100%-188px)]">{children}</div>
|
|
|
|
{onShare && (
|
|
<div className="absolute -right-20 bottom-1/2 translate-y-1/2">
|
|
<Image
|
|
button
|
|
src={getStaticImage(`${starName}/reflection/lobby/icon/分享`)}
|
|
alt="分享"
|
|
onClick={onShare}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
export default UnlockHintDialog
|