more detail on index; move delete to recipe page

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,55 +1,21 @@
-import { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
-import Modal from '../components/Modal.tsx'
-import DemoModal from '../components/DemoModal.tsx'
 import { Link } from 'react-router-dom';
+import StarRating from '../components/StarRating.tsx'
 
-interface CookbookRecipeTileProps {
-  recipe: RecipeSmall;
-  handleDelete: (id: number | undefined) => void;
-}
-
-function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [showDemoModal, setShowDemoModal] = useState(false);
-
-  const openModal = () => { setShowConfirmModal(true) };
-  const closeModal = () => { setShowConfirmModal(false) };
-  const confirmDelete = () => {
-    if (process.env.NODE_ENV === 'demo') {
-      closeModal();
-      setShowDemoModal(true);
-    } else {
-      handleDelete(recipe.id);
-      closeModal();
-    }
-  };
-
+function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
 
   return (
-    <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
+    <div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
       <div className="flex justify-between items-center recipe-name">
-        <h3 className="font-bold"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
-        <button onClick={openModal} className="text-red-500 focus:outline-none">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
+        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
+        <div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
+          {recipe.cuisine}
+        </div>
+      </div>
+      <div className="flex justify-between items-center">
+        ⏰ {recipe.prep_minutes + recipe.cook_minutes} min
+        <StarRating rating={recipe.stars} onRatingChange={() => { }} />
       </div>
-      <Modal
-        isOpen={showConfirmModal}
-        onClose={closeModal}
-        message="Are you sure you want to delete this recipe?"
-        confirmAction={confirmDelete}
-        cancelAction={closeModal}
-      />
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 };