Molecule Energy Simulator

src/components/landing-page/DemonstratorChooser.tsx

@@ -10,6 +10,12 @@ export const DemonstratorChooser = (props: GridProps) => (
         title="Mixed Integer Programming"
         description="The MIP problem is a mathematical optimization problem where some or all of the variables are restricted to be integers."
       />
+      <DemonstratorCard
+        new={true}
+        href="demonstrate/MoleculeEnergySimulator"
+        title="Molecule Energy Simulator"
+        description="This demonstrator will compute the ground state energy for a given molecule using VQE algorithm."
+      />
     </GridItem>
   </Grid>
 );

src/pages/demonstrate/MoleculeEnergySimulator.tsx

@@ -0,0 +1,32 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import { NextPage } from "next";
+import { useState } from "react";
+import { Demonstrator } from "../../components/demonstrators/Demonstrator";
+import { Layout } from "../../components/layout/Layout";
+
+const MoleculeEnergySimulator: NextPage = () => {
+  const [svg, setSvg] = useState<string | null>(null);
+
+  return (
+    <Layout>
+      <Heading as="h1">Molecule Energy Simulator</Heading>
+      <Text color="text" align="justify">
+        This demonstrator will compute the ground state energy for a given
+        molecule using VQE algorithm. The molecule input is given in XYZ Format.
+      </Text>
+
+      <Demonstrator
+        demonstratorId="edu.kit.provideq.toolbox.demonstrators.MoleculeEnergySimulator"
+        onSolved={setSvg}
+      />
+
+      {svg && (
+        <Flex justifyContent="center">
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </Flex>
+      )}
+    </Layout>
+  );
+};
+
+export default MoleculeEnergySimulator;