Merge pull request #55 from ProvideQ/feat/Knapsack-Problem

Added Knapsack problem interface

src/components/landing-page/ProblemChooser.tsx

@@ -57,5 +57,14 @@ export const ProblemChooser = (props: GridProps) => (
         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>
+    <GridItem>
+      <ProblemCard
+        href="solve/Knapsack"
+        new={true}
+        tags={["QAOA"]}
+        problemName={"Knapsack"}
+        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>
   </Grid>
 );

src/pages/solve/Knapsack.tsx

@@ -0,0 +1,45 @@
+import { Heading, Link, 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 Knapsack: NextPage = () => {
+  const [knapsackProblem, setKnapsackProblem] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">Knapsack Solver</Heading>
+
+      <Text color="text" align="justify">
+        In the 0-1 knapsack problem, we are given a list of items, each with a
+        weight and a value, and the maximum weight that the knapsack can hold.
+        The goal is to find the subset of items that maximizes the total value
+        while keeping the total weight below the maximum weight. Example
+        problems and an explanation of the input format can be found{" "}
+        <Link
+          href="https://github.com/ProvideQ/knapsack-problems"
+          color={"blue.400"}
+        >
+          here
+        </Link>
+        .
+      </Text>
+
+      <TextInputMask
+        problemTypeId="knapsack"
+        text={knapsackProblem}
+        setText={setKnapsackProblem}
+        textPlaceholder="Enter your knapsack problem"
+      />
+
+      <SolverConfiguration
+        problemTypeId="knapsack"
+        problemInput={knapsackProblem}
+      />
+    </Layout>
+  );
+};
+
+export default Knapsack;