Add frontend problem mask for OpenQASM code processing

src/components/landing-page/ProblemChooser.tsx

@@ -63,5 +63,14 @@ export const ProblemChooser = (props: GridProps) => (
         description="Given a list of items with weights and values, find a subset of items with the highest total value up to a certain weight limit."
       />
     </GridItem>
+    <GridItem>
+      <ProblemCard
+        href="solve/CircuitProcessing"
+        new={true}
+        tags={["execute", "optimize", "mitigate"]}
+        title={"Process QASM circuits"}
+        description="Process an OpenQASM circuit."
+      />
+    </GridItem>
   </Grid>
 );

src/pages/solve/CircuitProcessing.tsx

@@ -0,0 +1,44 @@
+import {
+  Heading,
+  Link,
+  Spacer,
+  Text,
+} from "@chakra-ui/react";
+import { NextPage } from "next";
+import { useState } from "react";
+import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+
+const CircuitProcessing: NextPage = () => {
+  const [qasmString, setQASMString] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">OpenQASM Processing</Heading>
+      <Text color="text" align="justify">
+        Give a circuit in {" "}
+        <Link
+          href="https://en.wikipedia.org/wiki/OpenQASM"
+          color={"blue.400"}
+        >
+          OpenQASM
+        </Link>{" "}
+        to process it. You can choose to execute the circuit, optimize it or
+        apply error mitigation strategies.
+      </Text>
+
+      <Spacer />
+
+      <TextInputMask
+        problemTypeId="circuit-processing"
+        textPlaceholder="Enter your OpenQASM code"
+        text={qasmString}
+        setText={setQASMString}
+      />
+
+      <SolverConfiguration problemTypeId="circuit-processing" problemInput={qasmString} />
+    </Layout>
+  );
+};
+export default CircuitProcessing;