From 9430b0e08acb2e869c0c4b750aaf06b34f42deca Mon Sep 17 00:00:00 2001
From: zaibod <92274292+zaibod@users.noreply.github.com>
Date: Tue, 10 Sep 2024 15:44:44 +0200
Subject: [PATCH 1/4] Added Knapsack problem type

---
 .../landing-page/ProblemChooser.tsx           |  9 +++++
 src/pages/solve/Knapsack.tsx                  | 40 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/pages/solve/Knapsack.tsx

diff --git a/src/components/landing-page/ProblemChooser.tsx b/src/components/landing-page/ProblemChooser.tsx
index 086f673..460c2af 100644
--- a/src/components/landing-page/ProblemChooser.tsx
+++ b/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={["QUBO"]}
+        problemName={"Knapsack"}
+        description="Maximize the total value of items in a knapsack without exceeding the capacity of the knapsack."
+      />
+    </GridItem>
   </Grid>
 );
diff --git a/src/pages/solve/Knapsack.tsx b/src/pages/solve/Knapsack.tsx
new file mode 100644
index 0000000..ac7e9b8
--- /dev/null
+++ b/src/pages/solve/Knapsack.tsx
@@ -0,0 +1,40 @@
+import { Heading, 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">
+        The Knapsack problem is a combinatorial optimization problem that
+        seeks to maximize the total value of items in a knapsack without
+        exceeding the capacity of the knapsack.
+        You can enter a problem in the following format, all integers:
+        a line containing the amount of items,
+        lines containing the items in format &quot;id value weight&quot;
+        and a line containing the capacity of the knapsack.
+      </Text>
+
+      <TextInputMask
+        problemTypeId="knapsack"
+        text={knapsackProblem}
+        setText={setKnapsackProblem}
+        textPlaceholder="Enter your knapsack problem"
+      />
+
+      <SolverConfiguration
+        problemTypeId="knapsack"
+        problemInput={knapsackProblem}
+      />
+    </Layout>
+  );
+};
+
+export default Knapsack;

From 5a18b8bb1b5377754f0bdbff00a063f2bf1b38cc Mon Sep 17 00:00:00 2001
From: zaibod <92274292+zaibod@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:07:35 +0200
Subject: [PATCH 2/4] ran prettier over changes

---
 src/pages/solve/Knapsack.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/solve/Knapsack.tsx b/src/pages/solve/Knapsack.tsx
index ac7e9b8..485f8ff 100644
--- a/src/pages/solve/Knapsack.tsx
+++ b/src/pages/solve/Knapsack.tsx
@@ -13,13 +13,12 @@ const Knapsack: NextPage = () => {
       <Heading as="h1">Knapsack Solver</Heading>
 
       <Text color="text" align="justify">
-        The Knapsack problem is a combinatorial optimization problem that
-        seeks to maximize the total value of items in a knapsack without
-        exceeding the capacity of the knapsack.
-        You can enter a problem in the following format, all integers:
-        a line containing the amount of items,
-        lines containing the items in format &quot;id value weight&quot;
-        and a line containing the capacity of the knapsack.
+        The Knapsack problem is a combinatorial optimization problem that seeks
+        to maximize the total value of items in a knapsack without exceeding the
+        capacity of the knapsack. You can enter a problem in the following
+        format, all integers: a line containing the amount of items, lines
+        containing the items in format &quot;id value weight&quot; and a line
+        containing the capacity of the knapsack.
       </Text>
 
       <TextInputMask

From f6b581fd6e0b2921174d7771f75e84ef8fed4e03 Mon Sep 17 00:00:00 2001
From: zaibod <uxoik@student.kit.edu>
Date: Mon, 16 Sep 2024 22:00:21 +0200
Subject: [PATCH 3/4] changed Knapsack tag from QUBO to QAOA

---
 src/components/landing-page/ProblemChooser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing-page/ProblemChooser.tsx b/src/components/landing-page/ProblemChooser.tsx
index 460c2af..321989e 100644
--- a/src/components/landing-page/ProblemChooser.tsx
+++ b/src/components/landing-page/ProblemChooser.tsx
@@ -61,7 +61,7 @@ export const ProblemChooser = (props: GridProps) => (
       <ProblemCard
         href="solve/Knapsack"
         new={true}
-        tags={["QUBO"]}
+        tags={["QAOA"]}
         problemName={"Knapsack"}
         description="Maximize the total value of items in a knapsack without exceeding the capacity of the knapsack."
       />

From 3456083814448bdfe1986300d9c3dd6195283a68 Mon Sep 17 00:00:00 2001
From: zaibod <uxoik@student.kit.edu>
Date: Tue, 17 Sep 2024 01:40:05 +0200
Subject: [PATCH 4/4] rewrote Knapsack explanations

---
 .../landing-page/ProblemChooser.tsx           |  2 +-
 src/pages/solve/Knapsack.tsx                  | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/landing-page/ProblemChooser.tsx b/src/components/landing-page/ProblemChooser.tsx
index 321989e..53e2f12 100644
--- a/src/components/landing-page/ProblemChooser.tsx
+++ b/src/components/landing-page/ProblemChooser.tsx
@@ -63,7 +63,7 @@ export const ProblemChooser = (props: GridProps) => (
         new={true}
         tags={["QAOA"]}
         problemName={"Knapsack"}
-        description="Maximize the total value of items in a knapsack without exceeding the capacity of the 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>
diff --git a/src/pages/solve/Knapsack.tsx b/src/pages/solve/Knapsack.tsx
index 485f8ff..9c28836 100644
--- a/src/pages/solve/Knapsack.tsx
+++ b/src/pages/solve/Knapsack.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text } from "@chakra-ui/react";
+import { Heading, Link, Text } from "@chakra-ui/react";
 import { NextPage } from "next";
 import { useState } from "react";
 import { Layout } from "../../components/layout/Layout";
@@ -13,12 +13,18 @@ const Knapsack: NextPage = () => {
       <Heading as="h1">Knapsack Solver</Heading>
 
       <Text color="text" align="justify">
-        The Knapsack problem is a combinatorial optimization problem that seeks
-        to maximize the total value of items in a knapsack without exceeding the
-        capacity of the knapsack. You can enter a problem in the following
-        format, all integers: a line containing the amount of items, lines
-        containing the items in format &quot;id value weight&quot; and a line
-        containing the capacity of the knapsack.
+        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