@heroicons/react/solid#PlayIcon TypeScript Examples

The following examples show how to use @heroicons/react/solid#PlayIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Samples.tsx From ide with Mozilla Public License 2.0

6 votes

export default function Samples({
  samples,
  inputTab,
  handleRunCode,
}: {
  samples: Sample[];
  inputTab: string;
  handleRunCode: () => void;
}): JSX.Element {
  const index = getSampleIndex(inputTab);
  const sample = samples[index - 1];

  return (
    <div className="text-sm">
      <button
        type="button"
        className="relative flex-shrink-0 inline-flex items-center px-4 py-2 w-40 shadow-sm text-sm font-medium text-white bg-indigo-900 hover:bg-indigo-800 focus:bg-indigo-800 focus:outline-none"
        onClick={handleRunCode}
      >
        <PlayIcon className="mr-2 h-5 w-5" aria-hidden="true" />
        <span className="text-center flex-1">Run {inputTab}</span>
      </button>
      <p className="font-bold mt-4">INPUT:</p>
      <pre className="-mx-4 sm:-mx-6 md:mx-0 md:rounded p-4 mt-4 mb-4 whitespace-pre-wrap break-all bg-gray-700">
        {sample.input}
      </pre>
      <p className="font-bold">OUTPUT:</p>
      <pre className="-mx-4 sm:-mx-6 md:mx-0 md:rounded p-4 mt-4 mb-4 whitespace-pre-wrap break-all bg-gray-700">
        {sample.output}
      </pre>
    </div>
  );
}

Example #2

Source File: RunButton.tsx From ide with Mozilla Public License 2.0

6 votes

RunButton = ({
  onClick,
  showLoading,
}: RunButtonProps): JSX.Element => (
  <button
    type="button"
    className="relative flex-shrink-0 inline-flex items-center px-4 py-2 w-32 shadow-sm text-sm font-medium text-white bg-indigo-900 hover:bg-indigo-800 focus:bg-indigo-800 focus:outline-none"
    onClick={onClick}
  >
    {showLoading ? (
      <LoadingIndicator
        className="h-5 w-5 p-0.5 text-indigo-100"
        data-test-id="run-code-loading"
      />
    ) : (
      <>
        <PlayIcon className="mr-2 h-5 w-5" aria-hidden="true" />
        <span className="text-center flex-1">Run Code</span>
      </>
    )}
  </button>
)

Example #3

Source File: JudgeInterface.tsx From ide with Mozilla Public License 2.0

4 votes

export default function JudgeInterface({
  problem,
  statusData,
  setStatusData,
  handleRunCode,
}: {
  problem: ProblemData;
  statusData: StatusData | null;
  setStatusData: React.Dispatch<React.SetStateAction<StatusData | null>>;
  handleRunCode: () => void;
}): JSX.Element {
  const mainMonacoEditor = useAtomValue(mainMonacoEditorAtom);
  const lang = useAtomValue(currentLangAtom);

  const handleSubmit = async () => {
    if (!mainMonacoEditor || !lang) {
      alert('Error: Page still loading?');
      return;
    }
    setStatusData({
      message: 'Sending submission to server',
      statusCode: -100,
    });

    const data = {
      problemID: problem.id,
      language: { cpp: 'c++17', java: 'java', py: 'python3' }[lang],
      base64Code: encode(mainMonacoEditor.getValue()),
    };

    const resp = await fetch(`${judgePrefix}/submit`, {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    const submissionID = await resp.text();

    const checkStatus = async () => {
      const statusResp = await fetch(
        `${judgePrefix}/submission/${submissionID}`
      );
      const data = await statusResp.json();
      setStatusData(data);

      if (data.statusCode && parseInt(data.statusCode) <= -8) {
        // still working
        setTimeout(checkStatus, 1000);
      }
    };

    setTimeout(checkStatus, 1000);
  };

  return (
    <div className="relative h-full flex flex-col">
      <div className="flex-1 overflow-y-auto">
        <div className="p-4 pb-0">
          <p className="text-gray-400 text-sm mb-4">
            Early access. Report issues to Github. Do not spam submit.
            {/* Note: You will not be able to submit to a problem in an active contest. */}
            {/* ^ is this necessary? */}
          </p>
          <>
            <p className="text-gray-100 font-bold text-lg">
              <a
                href={getUSACOContestURL(problem.source || '')}
                className="text-indigo-300"
                target="_blank"
                rel="noreferrer"
              >
                {problem.source}
              </a>
            </p>
            <p className="text-gray-100 font-bold text-lg">
              <a
                href={problem.url}
                className="text-indigo-300"
                target="_blank"
                rel="noreferrer"
              >
                {problem.title}
              </a>
            </p>
            <p className="text-gray-100 text-sm mb-4">
              <span className="font-bold">I/O:</span> {problem.input}/
              {problem.output}
              {problem.input.includes('.in') && (
                <> (&quot;Run Samples&quot; still runs on stdin/stdout)</>
              )}
            </p>
            {problem.samples.length > 0 && (
              <button
                type="button"
                className="relative flex-shrink-0 inline-flex items-center px-4 py-2 w-40 shadow-sm text-sm font-medium text-white bg-indigo-900 hover:bg-indigo-800 focus:bg-indigo-800 focus:outline-none"
                onClick={handleRunCode}
              >
                <PlayIcon className="mr-2 h-5 w-5" aria-hidden="true" />
                <span className="text-center flex-1">Run Samples</span>
              </button>
            )}
          </>
        </div>
        <div className="px-4">
          <USACOResults data={statusData} />
        </div>
      </div>
      <SubmitButton
        isLoading={(statusData?.statusCode ?? 0) <= -8}
        isDisabled={!problem.submittable}
        onClick={() => handleSubmit()}
      />
    </div>
  );
}