11 make section for bookmarked plants in profile

frontend/src/components/profile/Profile.css

@@ -26,9 +26,86 @@
   margin-top: 50px;
 }
 
+.profile-tabs {
+  width: 700px;
+  height: 55px;
+
+  background-color: var(--dark-green);
+  border-radius: 35px;
+
+  display: flex;
+  align-items: center;
+
+  padding: 5px;
+  box-sizing: border-box;
+
+  margin: 30px auto;
+}
+
+.profile-tabs button {
+  flex: 1;
+  height: 45px;
+
+  border: none;
+  border-radius: 30px;
+
+  background: transparent;
+  color: var(--light-background);
+
+  font-size: 20px;
+
+  cursor: pointer;
+}
+
+.profile-tabs button.active {
+  background-color: var(--light-green);
+  color: var(--text);
+}
+
+.saved-plants {
+  margin: 50px auto 0;
+  width: 100%;
+  background-color: var(--light-pink);
+  border-radius: 10px;
+  padding: 30px 30px 30px 30px;
+  box-sizing: border-box;
+}
+
+.saved-plants h2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.plant-card-holder {
+  width: 260px;
+  height: 300px;
+  box-sizing: border-box;
+
+  background-color: var(--light-background);
+  border: 1px solid var(--dark-green);
+  border-radius: 12px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.saved-plants-display {
+  margin-top: 50px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 260px);
+  gap: 40px;
+  justify-content: center;
+}
+
 @media (max-width: 767px) {
   .profile {
     margin-left: 0;
     padding: 24px 16px;
   }
+
+  .profile-tabs {
+    width: 400px;
+  }
 }

frontend/src/components/profile/Profile.tsx

@@ -3,10 +3,24 @@ import PlantPreferences from "../plantPreferences/PlantPreferences.tsx";
 import profileImg from "../../assets/profile.png";
 import type { Preference } from "../../types/Preference.ts";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 
 export default function Profile() {
   const { t } = useTranslation();
 
+  const [activeTab, setActiveTab] = useState<"preferences" | "savedPlants">(
+    "preferences",
+  );
+
+  const plants = [
+    { name: "Hydrangea" },
+    { name: "Orchid" },
+    { name: "Fig Tree" },
+    { name: "Monstera" },
+    { name: "Peony" },
+    { name: "Lily" },
+  ];
+
   const preferences: Preference[] = [
     { id: "flowering", translationKey: "preferences.flowering" },
     { id: "petFriendly", translationKey: "preferences.petFriendly" },
@@ -26,15 +40,46 @@ export default function Profile() {
         <img className="profile-img" src={profileImg} alt="Profile" />
 
         <div className="profile-text">
-          <h1> Name Surname</h1>
-          <p> Description </p>
+          <h1> {t("profile.name")}</h1>
+          <p> {t("profile.description")} </p>
         </div>
       </div>
 
-      <div className="profile-preferences">
-        <h2>{t("preferences.title")}</h2>
-        <PlantPreferences preferences={preferences} />
+      <div className="profile-tabs">
+        <button
+          className={activeTab === "preferences" ? "active" : ""}
+          onClick={() => setActiveTab("preferences")}
+        >
+          {t("profile.preferences")}
+        </button>
+
+        <button
+          className={activeTab === "savedPlants" ? "active" : ""}
+          onClick={() => setActiveTab("savedPlants")}
+        >
+          {t("profile.savedPlants")}
+        </button>
       </div>
+
+      {activeTab === "preferences" && (
+        <div className="profile-preferences">
+          <h2>{t("preferences.title")}</h2>
+          <PlantPreferences preferences={preferences} />
+        </div>
+      )}
+
+      {activeTab === "savedPlants" && (
+        <div className="saved-plants">
+          <h2>𖤘 {t("profile.savedPlants")}</h2>
+          <div className="saved-plants-display">
+            {plants.map((plant) => (
+              <div className="plant-card-holder" key={plant.name}>
+                <p>{plant.name}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </main>
   );
 }

frontend/src/i18n/locales/en/translation.json

@@ -35,5 +35,11 @@
   },
   "myMatchesPage": {
     "guide": "These are your matches:"
+  },
+  "profile": {
+    "name": "Name Surname",
+    "description": "Description",
+    "preferences": "Preferences",
+    "savedPlants": "Saved plants"
   }
 }

frontend/src/i18n/locales/no/translation.json

@@ -35,5 +35,11 @@
   },
   "myMatchesPage": {
     "guide": "Dette er dine matcher:"
+  },
+  "profile": {
+    "name": "Navn Etternavn",
+    "description": "Beskrivelse",
+    "preferences": "Preferanser",
+    "savedPlants": "Lagrede planter"
   }
 }