github.com/kubri/kubri@v0.5.1-0.20240317001612-bda2aaef967e/website/src/plugins/changelog/theme/ChangelogItem/Header/Authors/index.tsx (about)

     1  /**
     2   * Copyright (c) Facebook, Inc. and its affiliates.
     3   *
     4   * This source code is licensed under the MIT license found in the
     5   * LICENSE file in the root directory of this source tree.
     6   */
     7  
     8  import { useState, type JSX } from 'react'
     9  import clsx from 'clsx'
    10  import { useBlogPost } from '@docusaurus/theme-common/internal'
    11  import ChangelogItemHeaderAuthor from '@theme/ChangelogItem/Header/Author'
    12  import IconExpand from '@theme/Icon/Expand'
    13  import type { Props } from '@theme/BlogPostItem/Header/Authors'
    14  
    15  import styles from './styles.module.css'
    16  
    17  // Component responsible for the authors layout
    18  export default function BlogPostAuthors({ className }: Props): JSX.Element | null {
    19    const {
    20      metadata: { authors },
    21      assets,
    22    } = useBlogPost()
    23    const [expanded, setExpanded] = useState(false)
    24    const authorsCount = authors.length
    25    if (authorsCount === 0) {
    26      return null
    27    }
    28    const filteredAuthors = authors.slice(0, expanded ? authors.length : 10)
    29    return (
    30      <div className={clsx('margin-top--md margin-bottom--sm', styles.imageOnlyAuthorRow, className)}>
    31        {filteredAuthors.map((author, idx) => (
    32          <div className={styles.imageOnlyAuthorCol} key={idx}>
    33            <ChangelogItemHeaderAuthor
    34              author={{
    35                ...author,
    36                // Handle author images using relative paths
    37                imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
    38              }}
    39            />
    40          </div>
    41        ))}
    42        {authors.length > 10 && (
    43          <button
    44            className={clsx('clean-btn', styles.toggleButton)}
    45            type="button"
    46            onClick={() => setExpanded((v) => !v)}
    47            aria-label="expand"
    48          >
    49            <IconExpand expanded={expanded} />
    50          </button>
    51        )}
    52      </div>
    53    )
    54  }