Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/block-header.tsx (TypeScript)

Code before:
import React from 'react';
import { isEmpty } from 'lodash';
import { Button } from '@freecodecamp/ui';
import { Link } from '../../../components/helpers';

import type { BlockLabel as BlockLabelType } from '../../../../../shared-dist/config/blocks';
import { ProgressBar } from '../../../components/Progress/progress-bar';
import DropDown from '../../../assets/icons/dropdown';
import CheckMark from './check-mark';
import BlockLabel from './block-label';
import BlockIntros from './block-intros';

interface BlockHeaderProps {
  blockDashed: string;
  blockTitle: string;
  blockLabel: BlockLabelType | null;
  courseCompletionStatus: string;
  completedCount: number;
  handleClick: () => void;
  isCompleted: boolean;
  isExpanded: boolean;
  percentageCompleted: number;
  blockIntroArr?: string[];
  accordion?: boolean;
  blockUrl?: string;
  onLinkClick?: () => void;
}

function BlockHeader({
  blockDashed,
  blockTitle,
  blockLabel,
  completedCount,
  courseCompletionStatus,
  handleClick,
  isCompleted,
  isExpanded,
  percentageCompleted,
  blockIntroArr,
  accordion,
  blockUrl,
  onLinkClick
}: BlockHeaderProps): JSX.Element {
  const InnerBlockHeader = () => (
    <>
      <span className='block-header-button-text map-title'>
        {accordion &&
          (blockUrl ? <span className='aligner-dash'></span> : <DropDown />)}
        <CheckMark isCompleted={isCompleted} />
        {!accordion && blockLabel && <BlockLabel blockLabel={blockLabel} />}
        <span>

Review comment (suggestion):
```suggestion

interface BlockHeaderButtonProps extends BaseBlockHeaderProps {
  blockUrl?: never;
  onLinkClick?: never;
}

interface BlockHeaderLinkProps extends BaseBlockHeaderProps {
  blockUrl: string;
  onLinkClick: () => void;
}

type BlockHeaderProps = BlockHeaderButtonProps | BlockHeaderLinkProps;
```

Code after:
import React from 'react';
import { isEmpty } from 'lodash';
import { Button } from '@freecodecamp/ui';
import { Link } from '../../../components/helpers';

import type { BlockLabel as BlockLabelType } from '../../../../../shared-dist/config/blocks';
import { ProgressBar } from '../../../components/Progress/progress-bar';
import DropDown from '../../../assets/icons/dropdown';
import CheckMark from './check-mark';
import BlockLabel from './block-label';
import BlockIntros from './block-intros';

interface BaseBlockHeaderProps {
  blockDashed: string;
  blockTitle: string;
  blockLabel: BlockLabelType | null;
  courseCompletionStatus: string;
  completedCount: number;
  handleClick: () => void;
  isCompleted: boolean;
  isExpanded: boolean;
  percentageCompleted: number;
  blockIntroArr?: string[];
  accordion?: boolean;
}

interface BlockHeaderButtonProps extends BaseBlockHeaderProps {
  blockUrl?: never;
  onLinkClick?: never;
}

interface BlockHeaderLinkProps extends BaseBlockHeaderProps {
  blockUrl: string;
  onLinkClick: () => void;
}

type BlockHeaderProps = BlockHeaderButtonProps | BlockHeaderLinkProps;
function BlockHeader({
  blockDashed,
  blockTitle,
  blockLabel,
  completedCount,
  courseCompletionStatus,
  handleClick,
  isCompleted,
  isExpanded,
  percentageCompleted,
  blockIntroArr,
  accordion,
  blockUrl,
  onLinkClick