import * as React from 'react';
import { Problem } from '../../../content/models';
type ProblemsListComponentProps = {
title?: string;
children?: React.ReactChildren;
problems: Problem[];
};
export function ProblemsListComponent(props: ProblemsListComponentProps) {
return (
Source
Problem Name
Difficulty
{props.problems.map(problem => (
);
}
type ProblemComponentProps = {
problem: Problem;
};
export function ProblemComponent(props: ProblemComponentProps) {
const difficultyClasses = {
Intro: 'bg-teal-100 text-teal-800',
Easy: 'bg-yellow-100 text-yellow-800',
Normal: 'bg-green-100 text-green-800',
Hard: 'bg-purple-100 text-purple-800',
'Very Hard': 'bg-red-100 text-red-800',
Insane: 'bg-blue-100 text-blue-800',
};
const [showTags, setShowTags] = React.useState(false);
const { problem } = props;
return (
{problem.source}
{problem.starred && (
)}
{problem.name}
{problem.difficulty && (
{problem.difficulty}
)}
{!showTags && (
{
e.preventDefault();
setShowTags(true);
}}
>
Show Tags
)}
{showTags &&
(problem.tags && problem.tags.length
? problem.tags.join(', ')
: 'None')}
{/*{props.children}*/}
Show Solution
);
}