ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 Actions Packages Activity

fix(name,title): handle empty states in "did you know" section

Browse Source
This commit is contained in:
zyachel
2025-06-01 13:08:06 +00:00
committed by ngn
parent e98ab85034
commit 34bcdc3b05
2 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/name/DidYouKnow.tsx
View File

@ -9,43 +9,54 @@ type Props = {
const DidYouKnow = ({ data }: Props) => ( const DidYouKnow = ({ data }: Props) => (
<section className={styles.container}> <section className={styles.container}>
<h2 className='heading heading__secondary'>Did you know</h2> <h2 className='heading heading__secondary'>Did you know</h2>
{!!data.trivia?.total && ( {isEmpty(data) ? (
<section> <p>Nothing interesting to show.</p>
<h3 className='heading heading__tertiary'>Trivia</h3> ) : (
<div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div> <>
</section> {!!data.trivia?.total && (
)} <section>
{!!data.quotes?.total && ( <h3 className='heading heading__tertiary'>Trivia</h3>
<section> <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
<h3 className='heading heading__tertiary'>Quotes</h3> </section>
<div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div> )}
</section> {!!data.quotes?.total && (
)} <section>
{!!data.trademark?.total && ( <h3 className='heading heading__tertiary'>Quotes</h3>
<section> <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
<h3 className='heading heading__tertiary'>Trademark</h3> </section>
<div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div> )}
</section> {!!data.trademark?.total && (
)} <section>
{!!data.nicknames.length && ( <h3 className='heading heading__tertiary'>Trademark</h3>
<section> <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
<h3 className='heading heading__tertiary'>Nicknames</h3> </section>
<p>{data.nicknames.join(', ')}</p> )}
</section> {!!data.nicknames.length && (
)} <section>
{!!data.salary?.total && ( <h3 className='heading heading__tertiary'>Nicknames</h3>
<section> <p>{data.nicknames.join(', ')}</p>
<h3 className='heading heading__tertiary'>Salary</h3> </section>
<p> )}
<span>{data.salary.value} in </span> {!!data.salary?.total && (
<Link href={`/title/${data.salary.title.id}`}> <section>
<a className={'link'}>{data.salary.title.text}</a> <h3 className='heading heading__tertiary'>Salary</h3>
</Link> <p>
<span> ({data.salary.title.year})</span> <span>{data.salary.value} in </span>
</p> <Link href={`/title/${data.salary.title.id}`}>
</section> <a className={'link'}>{data.salary.title.text}</a>
</Link>
<span> ({data.salary.title.year})</span>
</p>
</section>
)}
</>
)} )}
</section> </section>
); );
export default DidYouKnow; export default DidYouKnow;
const isEmpty = (data: Props['data']) =>
Boolean(
!data.nicknames.length && !data.quotes && !data.salary && !data.trademark && !data.trivia
);

8
src/components/title/DidYouKnow.tsx
View File

@ -7,7 +7,13 @@ type Props = {
}; };
const DidYouKnow = ({ data }: Props) => { const DidYouKnow = ({ data }: Props) => {
if (!Object.keys(data).length) return <></>; if (!Object.keys(data).length)
return (
<section className={styles.didYouKnow}>
<h2 className='heading heading__secondary'>Did you know</h2>
<p>Nothing interesting to show.</p>
</section>
);
return ( return (
<section className={styles.didYouKnow}> <section className={styles.didYouKnow}>
<h2 className='heading heading__secondary'>Did you know</h2> <h2 className='heading heading__secondary'>Did you know</h2>