ExerciseLayout

import {
  ExerciseLayout,
  ExerciseValidation,
  ExerciseResults,
} from '@bside-tech/tbx-ui/components';
import { usePickMultiExercise } from '@bside-tech/tbx-ui/hooks';

function CustomExercise() {
  const { answers, setAnswer, isCorrect, check, reset } = usePickMultiExercise({
    solution: ['paris'],
    initial: '',
    checkOn: 'manual',
  });

  const validated = isCorrect !== null;

  return (
    <ExerciseLayout
      icon="🎯"
      title="Capital cities"
      description="Select the correct answer."
      info={<span>Hint: Think European capitals</span>}
      footer={
        <>
          <ExerciseValidation
            checkOn="manual"
            validated={validated}
            onCheck={check}
            onReset={reset}
          />
          <ExerciseResults
            isCorrect={isCorrect}
            correctCount={isCorrect === true ? 1 : 0}
            totalCount={1}
          />
        </>
      }
    >
      <div>
        <button onClick={() => setAnswer(0, 'paris')}>Paris</button>
        <button onClick={() => setAnswer(0, 'london')}>London</button>
      </div>
    </ExerciseLayout>
  );
}