<TabbedComponents customClassName='This defaults to TabbedComponents' tabNames='This needs to be Array<string> and represents the labels on each tab'>
  <Children /> // The number of children **must** match the length of the tabNames array
</TabbedComponents>

// Result:
<div class="customClassName">
  <div class="customClassName__tabs">
    <button class="customClassName__tab">tabNames[0]</button>
    <button class="customClassName__tab">tabNames[1]</button>
    // ... And so on and so forth
  </div>
  <div class="customClassName__components">
    <...Children>
  </div>
</div>

import { ReactElement, useEffect, useState } from 'react';
import Gist from 'react-gist';
import getGistsByUsername from './getGists';
import {TabbedComponents} from '@gavinsykes/react-tabbed-components';

interface GistInfo {
  language: string;
  linkText: string;
}

interface TabbedGistsComponentProps {
  eulerProblemNumber: number;
}

function TabbedGists(props: TabbedGistsComponentProps): ReactElement {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [filteredGistInfo, setFilteredGistInfo] = useState<Array<GistInfo>>([]);

  function clearError() {
    setError(false);
    setErrorMessage('');
  }

  useEffect(() => {
    let error = false;
    let errorMessage = '';
    async function getGists() {
      const response = await getGistsByUsername('gavinsykes');
      if (response.length == 0) {
        console.log('Response length is 0');
        error = true;
        errorMessage = 'No Gists found';
      }
      const filteredGists = response.filter(gist => {
        return Object.keys(gist.files)[0].startsWith(`euler_problem_${props.eulerProblemNumber}.`);
      });
      setFilteredGistInfo(
        filteredGists.sort((a,b) => Object.values(a.files)[0].language > Object.values(b.files)[0].language ? 1 : -1).map(gist => ({language: Object.values(gist.files)[0].language,linkText: `${gist.owner.login}/${gist.id}`}))
      );
      if (filteredGists.length == 0) {
        error = true;
        errorMessage = `No Gists found for problem ${props.eulerProblemNumber}`;
      }
      if (error) {
        setError(true);
        setErrorMessage(errorMessage);
      } else {
        clearError();
      }
      setLoading(false);
    }

    getGists();
  }, [props.eulerProblemNumber]);

  return loading ? <p>TabbedGists component loading...</p> : error ? <p>{errorMessage}</p> : <TabbedComponents customClassName='TabbedGists' tabNames={filteredGistInfo.map(gist => gist.language)}>
    {filteredGistInfo.map((gist, index) => <Gist id={gist.linkText} key={index}/>)}
  </TabbedComponents>;
}

export default TabbedGists;