fix: planter link on top page

Author: dadiorchen

src/components/FeaturedPlantersSlider/index.js

@@ -94,77 +94,76 @@ function FeaturedPlantersSlider({
         onScroll={debounce(onScroll, 70)}
       >
         {planters.map((planter) => (
-          <Tooltip
-            key={planter.id}
-            title={showAppropiateToolTipName(planter)}
-            classes={{
-              tooltip: classes.toolTip,
-            }}
-          >
-            <Card
+          <Link href={link(planter.id)} key={`featured-planter-${planter.id}`}>
+            <Tooltip
               key={planter.id}
-              elevation={8}
-              sx={{
-                transition: 'all .5s',
-                scrollSnapAlign: 'center',
-                scrollBehavior: 'smooth',
-                // position: 'relative',
-                padding: (theme) => theme.spacing(5),
-                borderRadius: (theme) => theme.spacing(4),
-                overflow: 'initial',
-                cursor: 'pointer',
-                bgcolor: (t) =>
-                  t.palette.mode === 'light'
-                    ? d3
-                        .color(t.palette[color].main)
-                        .copy({ opacity: 0.2 })
-                        .formatRgb()
-                    : d3
-                        .color(t.palette[color].main)
-                        .copy({ opacity: 0.4 })
-                        .formatRgb(),
+              title={showAppropiateToolTipName(planter)}
+              classes={{
+                tooltip: classes.toolTip,
               }}
             >
-              <CardMedia
-                onClick={() => {
-                  window.location.href = link(planter.id);
-                }}
-                component="img"
-                image="https://treetracker-production.nyc3.digitaloceanspaces.com/2019.07.10.18.32.42_b4fad89a-10b6-40cc-a134-0085d0e581d2_IMG_20190710_183201_8089920786231467340.jpg"
-                alt="tree"
+              <Card
+                key={planter.id}
+                elevation={8}
                 sx={{
-                  width: 136,
-                  height: 136,
-                  borderWidth: 4,
-                  borderStyle: 'solid',
-                  borderColor: (t) => t.palette.background.paper,
-                  boxSizing: 'border-box',
-                  borderRadius: '50%',
-                  transition: 'transform .5s',
+                  transition: 'all .5s',
+                  scrollSnapAlign: 'center',
+                  scrollBehavior: 'smooth',
+                  // position: 'relative',
+                  padding: (theme) => theme.spacing(5),
+                  borderRadius: (theme) => theme.spacing(4),
+                  overflow: 'initial',
+                  cursor: 'pointer',
+                  bgcolor: (t) =>
+                    t.palette.mode === 'light'
+                      ? d3
+                          .color(t.palette[color].main)
+                          .copy({ opacity: 0.2 })
+                          .formatRgb()
+                      : d3
+                          .color(t.palette[color].main)
+                          .copy({ opacity: 0.4 })
+                          .formatRgb(),
                 }}
-              />
-              {false && (
-                <CardContent>
-                  <Typography
-                    variant="h6"
-                    sx={{
-                      fontSize: '20px',
-                      marginTop: 4,
-                      wordBreak: 'break-all',
-                    }}
-                    align="center"
-                  >
-                    <Link href={link(planter.id)}>
-                      {planter.first_name}
-                      &nbsp;
-                      {(planter.last_name && planter.last_name.slice(0, 1)) ||
-                        ''}
-                    </Link>
-                  </Typography>
-                </CardContent>
-              )}
-            </Card>
-          </Tooltip>
+              >
+                <CardMedia
+                  component="img"
+                  image="https://treetracker-production.nyc3.digitaloceanspaces.com/2019.07.10.18.32.42_b4fad89a-10b6-40cc-a134-0085d0e581d2_IMG_20190710_183201_8089920786231467340.jpg"
+                  alt="tree"
+                  sx={{
+                    width: 136,
+                    height: 136,
+                    borderWidth: 4,
+                    borderStyle: 'solid',
+                    borderColor: (t) => t.palette.background.paper,
+                    boxSizing: 'border-box',
+                    borderRadius: '50%',
+                    transition: 'transform .5s',
+                  }}
+                />
+                {false && (
+                  <CardContent>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        fontSize: '20px',
+                        marginTop: 4,
+                        wordBreak: 'break-all',
+                      }}
+                      align="center"
+                    >
+                      <Link href={link(planter.id)}>
+                        {planter.first_name}
+                        &nbsp;
+                        {(planter.last_name && planter.last_name.slice(0, 1)) ||
+                          ''}
+                      </Link>
+                    </Typography>
+                  </CardContent>
+                )}
+              </Card>
+            </Tooltip>
+          </Link>
         ))}
       </Grid>