feat: Add TSP mask

src/components/landing-page/ProblemChooser.tsx

@@ -48,5 +48,14 @@ export const ProblemChooser = (props: GridProps) => (
         description="What is the optimal set of routes for a fleet of vehicles to traverse in order to deliver to a given set of customers?"
       />
     </GridItem>
+    <GridItem>
+      <ProblemCard
+        href="solve/TSP"
+        new={true}
+        tags={["sub-routines", "qubo"]}
+        problemName="Traveling Salesperson Problem"
+        description="Given a list of cities and the distances between them, find the shortest possible route that visits each city exactly once and returns to the origin city."
+      />
+    </GridItem>
   </Grid>
 );

src/pages/solve/TSP.tsx

@@ -0,0 +1,37 @@
+import { Heading, Spacer, Text } from "@chakra-ui/react";
+import type { 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 TSP: NextPage = () => {
+  const [tsp, setTsp] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">Traveling Salesperson Problem</Heading>
+      <Text color="text" align="justify">
+        The Traveling Salesperson Problem (TSP) is a classic combinatorial
+        optimization problem. Given a list of cities and the distances between
+        them, the task is to find the shortest possible route that visits each
+        city exactly once and returns to the origin city.
+      </Text>
+
+      <Spacer />
+
+      <TextInputMask
+        problemTypeId="tsp"
+        text={tsp}
+        setText={setTsp}
+        textPlaceholder={
+          "Enter your Traveling Salesperson Problem in tsp-lib format"
+        }
+      />
+
+      <SolverConfiguration problemTypeId="tsp" problemInput={tsp} />
+    </Layout>
+  );
+};
+
+export default TSP;