- Press n or j to go to the next uncovered block, - b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | .plant-match-page {
- margin-left: var(--sidebar-width);
- width: calc(100% - var(--sidebar-width));
- min-height: 100vh;
- margin-left: 16rem;
- width: calc(100% - 16rem);
- padding: 40px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 30px;
-}
-
-.intro {
- text-align: center;
-
- max-width: 850px;
- text-align: center;
- margin: 0 auto;
-}
-
-.intro h2 {
- margin: 0 0 45px;
- color: var(--text-dark);
- font-size: 32px;
- font-weight: 400;
-}
-
-.intro h3 {
- font-size: 24px;
- margin: 0 0 10px;
- color: var(--dark-green);
- font-weight: 500;
-}
-
-.intro p {
- max-width: 700px;
- margin: 0;
- color: var(--text-dark);
- font-size: 18px;
- line-height: 1.6;
-}
-
-.plant-match {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 50px;
- gap: 20px;
-}
-
-.plant-card-placeholder {
- width: 320px;
- height: 450px;
- background-color: var(--light-background);
- border: 1px solid var(--border-soft);
- border-radius: 5%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.swipe-button {
- width: 150px;
- height: 150px;
- border-radius: 50%;
- border: none;
- background-color: var(--light-background);
- font-size: 50px;
- cursor: pointer;
-
- line-height: 1;
- display: flex;
- align-items: center;
- justify-content: center;
-
- box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
-
- transition: transform 0.5s ease;
-
- color: var(--text-dark);
-}
-.swipe-button:hover {
- transform: scale(1.1);
-}
-
-.dislike-button {
- background-color: var(--dark-pink);
- color: var(--text-light);
- padding-bottom: 5px;
-}
-
-.like-button {
- background-color: var(--accent-green);
- color: var(--text-light);
-}
-
-.preferences-button {
- padding: 10px 24px;
- border: 1px solid var(--border-soft);
- border-radius: 20px;
- background-color: var(--light-background);
- color: var(--text-dark);
- font-size: 16px;
- cursor: pointer;
-
- transition:
- background-color 0.5s ease,
- transform 0.5s ease;
-}
-
-.preferences-button:hover {
- background-color: var(--light-pink);
- border-color: var(--border-pink);
- transform: scale(1.1);
-}
-
-@media (max-width: 767px) {
- .plant-match-page {
- margin-left: 0;
- width: 100%;
- padding: 30px 20px;
- }
-
- .intro {
- max-width: 100%;
- }
-
- .intro h2 {
- font-size: 28px;
- margin-bottom: 30px;
- }
-
- .intro h3 {
- font-size: 21px;
- }
-
- intro p {
- font-size: 16px;
- }
-
- .preferences-button {
- margin-top: 20px;
- }
-
- .plant-match {
- margin-top: 35px;
- gap: 12px;
- }
-
- .plant-card-placeholder {
- width: 240px;
- height: 350px;
- }
-
- .swipe-button {
- width: 90px;
- height: 90px;
- font-size: 70px;
- }
-}
- |
- Press n or j to go to the next uncovered block, - b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 | - - - - -8x - -8x - - - - - - - - - - -8x - -8x - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - -1x - - - - - - - - - - | import { useState } from "react";
-import "./PlantMatchPage.css";
-import { useTranslation } from "react-i18next";
-
-function PlantMatchPage() {
- const { t } = useTranslation();
- //dummy plants
- const plants = [
- {
- name: "Hydrangea",
- image: "/images/hydrangea.jpg",
- },
- {
- name: "Orchid",
- image: "/images/orchid.jpg",
- },
- ];
-
- const [currentPlant, setCurrentPlant] = useState(0);
-
- return (
- <main className="plant-match-page">
- <section className="intro">
- <h2>{t("plantMatchPage.title")}</h2>
-
- <h3>{t("plantMatchPage.howToMatch")} </h3>
- <br />
-
- <p>{t("plantMatchPage.instruction1")} </p>
- <br />
-
- <p>{t("plantMatchPage.instruction2")} </p>
- </section>
-
- <button className="preferences-button">
- {t("plantMatchPage.preferences")}
- </button>
-
- <section className="plant-match">
- <button
- className="swipe-button dislike-button"
- onClick={() => setCurrentPlant(currentPlant + 1)}
- >
- ✖
- </button>
- <div className="plant-card-placeholder">
- {plants[currentPlant].name}
- </div>
- <button
- className="swipe-button like-button"
- onClick={() => setCurrentPlant(currentPlant + 1)}
- >
- ✿
- </button>
- </section>
- </main>
- );
-}
-
-export default PlantMatchPage;
- |
- Press n or j to go to the next uncovered block, - b, p or k for the previous block. -
- -| - File - | -- | - Statements - | -- | - Branches - | -- | - Functions - | -- | - Lines - | -- |
|---|---|---|---|---|---|---|---|---|---|
| - PlantMatchPage.css - | -
-
-
-
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
| - PlantMatchPage.tsx - | -
-
-
-
-
- |
- 100% | -6/6 | -100% | -0/0 | -100% | -3/3 | -100% | -6/6 | -