diff --git a/frontend/src/components/profile/Profile.css b/frontend/src/components/profile/Profile.css index 308821c5..ac4fa884 100644 --- a/frontend/src/components/profile/Profile.css +++ b/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: 350px; + } } diff --git a/frontend/src/components/profile/Profile.tsx b/frontend/src/components/profile/Profile.tsx index c550abfb..160b9c27 100644 --- a/frontend/src/components/profile/Profile.tsx +++ b/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() { Profile
-

Name Surname

-

Description

+

{t("profile.name")}

+

{t("profile.description")}

-
-

{t("preferences.title")}

- +
+ + +
+ + {activeTab === "preferences" && ( +
+

{t("preferences.title")}

+ +
+ )} + + {activeTab === "savedPlants" && ( +
+

𖤘 {t("profile.savedPlants")}

+
+ {plants.map((plant) => ( +
+

{plant.name}

+
+ ))} +
+
+ )} ); } diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json index 8453d76d..0125e3ac 100644 --- a/frontend/src/i18n/locales/en/translation.json +++ b/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" } } diff --git a/frontend/src/i18n/locales/no/translation.json b/frontend/src/i18n/locales/no/translation.json index 03da998b..13e11c47 100644 --- a/frontend/src/i18n/locales/no/translation.json +++ b/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" } }