delete hypo

components/Hypothesis.tsx

@@ -4,23 +4,30 @@ import styles from './Hypothesis.module.css';
 interface HypothesisProps {
   hypoData: { title: string; content: string };
   setHypoContent: (content: string) => void;
+  onDelete: () => void;
 }
 
-const Hypothesis: React.FC<HypothesisProps> = ({ hypoData, setHypoContent }) => {
+const Hypothesis: React.FC<HypothesisProps> = ({ hypoData, setHypoContent, onDelete}) => {
 
   const handleHypoChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setHypoContent(event.target.value);
   };
 
   return (
-    <div className={styles.hypo_container}>
-      <h2 className="text-lg font-semibold mb-2">{hypoData.title}</h2>
-      <textarea
-        className={styles.hypo_textbox}
-        value={hypoData.content}
-        onChange={handleHypoChange}
-      />
-    </div>
+    <div className={styles.hypo_container} style={{ position: 'relative' }}>
+    <h2 className="text-lg font-semibold mb-2">{hypoData.title}</h2>
+    <button
+      onClick={onDelete}
+      className="absolute top-4 right-4 text-black bg-transparent border-none cursor-pointer"
+    >
+      ✕
+    </button>
+    <textarea
+      className={styles.hypo_textbox}
+      value={hypoData.content}
+      onChange={handleHypoChange}
+    />
+  </div>
   );
 };
 

components/HypothesisList.tsx

@@ -2,10 +2,6 @@ import React, { useState } from 'react';
 import Hypothesis from './Hypothesis';
 
 const HypothesisList: React.FC = ({items, hypos, setHypos}) => {
-  // const [hypotheses, setHypotheses] = useState([
-  //   { title: 'First Hunch', content: 'fill in your first hunch here!' },
-  // ]);
-
   const addHypothesis = () => {
     const newHypothesis = { title: 'Updated hypothesis', content: 'fill in your updated hypothesis' };
     setHypos([newHypothesis, ...hypos]);
@@ -17,6 +13,12 @@ const HypothesisList: React.FC = ({items, hypos, setHypos}) => {
     setHypos(newHypotheses);
   };
 
+  const deleteHypothesis = (index: number) => {
+    const newHypos = [...hypos];
+    newHypos.splice(index, 1); // Remove the hypothesis at the specified index
+    setHypos(newHypos);
+  };
+
   const [popupVisible, setPopupVisible] = useState(false);
   const togglePopup = () => {
     setPopupVisible(!popupVisible);
@@ -28,16 +30,22 @@ const HypothesisList: React.FC = ({items, hypos, setHypos}) => {
 
   return (
     <div className="p-2">
-      <button onClick={addHypothesis} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full float-right">
+      <button
+        onClick={addHypothesis}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full absolute right-4"
+      >
         Add New Hypothesis
       </button>
-      {hypos.map((hypoData, index) => (
-        <Hypothesis
-          key={index}
-          hypoData={hypoData}
-          setHypoContent={(content) => updateHypothesis(index, content)}
-        />
-      ))}
+      <div className="mt-12">
+        {hypos.map((hypoData, index) => (
+          <Hypothesis
+            key={index}
+            hypoData={hypoData}
+            setHypoContent={(content) => updateHypothesis(index, content)}
+            onDelete={() => deleteHypothesis(index)}
+          />
+        ))}
+      </div>
       <button
         className={`fixed left-4 bottom-4 p-2 bg-blue-500 text-white rounded cursor-pointer ${
           popupVisible ? 'hidden' : ''

pages/response.tsx

@@ -56,7 +56,7 @@ const Home: NextPage = ({sigName, projName, description, gen_context, detector,
     return (
       <div className={styles.container}>
         <div className={styles.column1}>
-          <button onClick={updateResponse}>Save Page</button>
+          {/* <button onClick={updateResponse}>Save Page</button> */}
           <Sidebar
             content={problemContent}
             setContent={setProblemContent}