refactor(challenge-modal): extract duplicated publication details JSX into shared variable

This commit is contained in:
plebeius
2026-02-26 13:57:13 +08:00
parent ffd61e07fd
commit cfba1f0aec
@@ -279,6 +279,29 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
const mobileX = isIframeVisible ? 5 : window.innerWidth / 2 - 150; const mobileX = isIframeVisible ? 5 : window.innerWidth / 2 - 150;
const mobileY = isIframeVisible ? Math.max(10, (window.innerHeight - 600) / 2) : window.innerHeight / 2 - 200; const mobileY = isIframeVisible ? Math.max(10, (window.innerHeight - 600) / 2) : window.innerHeight / 2 - 200;
const publicationDetails = (
<>
<div className={styles.name}>
<input type='text' value={displayName || capitalize(t('anonymous'))} disabled />
</div>
{title && (
<div className={styles.subject}>
<input type='text' value={title} disabled />
</div>
)}
{content && (
<div className={styles.content}>
<textarea value={content} disabled cols={48} rows={4} wrap='soft' />
</div>
)}
{link && (
<div className={styles.link}>
<input type='text' value={link} disabled />
</div>
)}
</>
);
return ( return (
<animated.div <animated.div
className={containerClasses.join(' ')} className={containerClasses.join(' ')}
@@ -303,49 +326,11 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
readableUrl={readableUrl} readableUrl={readableUrl}
closeModal={closeModal} closeModal={closeModal}
onDone={onIframeClose} onDone={onIframeClose}
publicationDetails={ publicationDetails={publicationDetails}
<>
<div className={styles.name}>
<input type='text' value={displayName || capitalize(t('anonymous'))} disabled />
</div>
{title && (
<div className={styles.subject}>
<input type='text' value={title} disabled />
</div>
)}
{content && (
<div className={styles.content}>
<textarea value={content} disabled cols={48} rows={4} wrap='soft' />
</div>
)}
{link && (
<div className={styles.link}>
<input type='text' value={link} disabled />
</div>
)}
</>
}
/> />
) : ( ) : (
<> <>
<div className={styles.name}> {publicationDetails}
<input type='text' value={displayName || capitalize(t('anonymous'))} disabled />
</div>
{title && (
<div className={styles.subject}>
<input type='text' value={title} disabled />
</div>
)}
{content && (
<div className={styles.content}>
<textarea value={content} disabled cols={48} rows={4} wrap='soft' />
</div>
)}
{link && (
<div className={styles.link}>
<input type='text' value={link} disabled />
</div>
)}
<div className={styles.challengeContainer}> <div className={styles.challengeContainer}>
<input <input
ref={inputRef} ref={inputRef}