55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useI18n } from '@/lib/i18n'
|
|
import UnlockModal from './UnlockModal'
|
|
|
|
export default function InfoBox() {
|
|
const { t } = useI18n()
|
|
const [showUnlockModal, setShowUnlockModal] = useState(false)
|
|
|
|
// Process the text to make "referral link" clickable
|
|
const processTaxesLegalText = () => {
|
|
const text = t('infoBox.taxesLegalText')
|
|
|
|
// Replace "referral link" or "Referral-Link" with a clickable link
|
|
// Preserve the original case of the matched text
|
|
const processed = text.replace(
|
|
/(referral link|Referral-Link)/gi,
|
|
(match) => `<a href="#" class="referral-link-clickable" style="cursor:pointer;text-decoration:underline;color:inherit;">${match}</a>`
|
|
)
|
|
|
|
return processed
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="info-box">
|
|
<div>
|
|
<h3>{t('infoBox.whyCheap')}</h3>
|
|
<p>{t('infoBox.whyCheapText')}</p>
|
|
</div>
|
|
<div>
|
|
<h3>{t('infoBox.taxesLegal')}</h3>
|
|
<p
|
|
dangerouslySetInnerHTML={{ __html: processTaxesLegalText() }}
|
|
onClick={(e) => {
|
|
const target = e.target as HTMLElement
|
|
if (target.classList.contains('referral-link-clickable')) {
|
|
e.preventDefault()
|
|
setShowUnlockModal(true)
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3>{t('infoBox.dropModel')}</h3>
|
|
<p>{t('infoBox.dropModelText')}</p>
|
|
</div>
|
|
</div>
|
|
<UnlockModal isOpen={showUnlockModal} onClose={() => setShowUnlockModal(false)} />
|
|
</>
|
|
)
|
|
}
|
|
|