Merge pull request #82 from OCA-UFCG/refact/map-section

Adds map Section to front page
OCA-UFCG · Sep 2, 2024 · 7e0c359 · 7e0c359
2 parents f72a4bb + fbcc274
commit 7e0c359
Show file tree

Hide file tree

Showing 3 changed files with 269 additions and 105 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/components/MapsSection/MapsSection.styles.tsx b/src/components/MapsSection/MapsSection.styles.tsx
@@ -1,61 +1,69 @@
 import { Section } from "@/app/globalStyles";
 import Image from "next/image";
 import styled from "styled-components";
+import { Icon } from "@/components/Icon/Icon";
+import Link from "next/link";
 
-export const Wrapper = styled(Section)`
+export const MapSectionWrapper = styled(Section)`
   padding: 2.5rem 1rem;
-  background-color: ${({ theme }) => theme.colors.green};
-  background-image: url("flower-background.png");
-  background-repeat: repeat;
-  background-size: 40rem;
   display: flex;
   flex-flow: column;
   align-items: center;
   overflow: hidden;
 `;
 
+export const BoxWrapper = styled.div`
+  display: flex;
+  gap: 1rem;
+  max-width: 1440px;
+  height: 550px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem;
+
+  @media screen and (max-width: 700px) {
+    flex-direction: column;
+  }
+`;
+
 export const TagsContainer = styled.div`
   display: flex;
-  flex-wrap: wrap;
   gap: 1rem;
-  justify-content: center;
+  width: 100%;
+  height: 100%;
   align-items: center;
-  max-width: 600px;
+  flex-direction: column;
+  overflow-y: scroll;
+  padding: 0.1rem;
 
-  @media screen and (max-width: 700px) {
-    justify-content: flex-start;
-    align-items: center;
-    max-width: 100vw;
-    padding: 0 1rem 0.5rem 1rem;
-    box-sizing: border-box;
-    height: fit-content;
-    flex-wrap: nowrap;
-    overflow: scroll;
-    -ms-overflow-style: none; /* IE and Edge */
-    overflow-y: hidden;
+  @media screen and (min-width: 700px) {
+    max-width: 450px;
   }
 `;
 
-export const Tag = styled.span<{ active?: string }>`
+export const TagButton = styled.span<{ active?: string }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
   color: ${({ theme, active }) =>
-    active === "true" ? theme.colors.green : theme.colors.white};
-  opacity: ${({ active }) => (active === "true" ? 0.6 : 1)};
-  transform: scale(${({ active }) => (active === "true" ? 0.9 : 1)});
-  padding: 0.25rem 1rem;
-  font-weight: bold;
-  border: 2px solid ${({ theme }) => theme.colors.white};
+    active === "true" ? theme.colors.green : theme.colors.black};
+  padding: 1rem 1rem;
+  background-color: ${({ theme }) => theme.colors.white};
+  width: 100%;
+  font-size: 1.1rem;
+  box-shadow: 0 0 4px #a3a3a3;
   border-radius: 2px;
-  transition: 0.3s;
-  text-wrap: nowrap;
+  transition: 1s;
   z-index: 0;
+  box-sizing: border-box;
   cursor: ${({ active }) => (active === "true" ? "not-allowed" : "pointer")};
-  background-color: ${({ theme, active }) =>
-    active === "false" ? "transparent" : theme.colors.white};
 
   &:hover {
-    transform: scale(${({ active }) => active !== "true" && "0.97"});
+    transform: scale(${({ active }) => active !== "true" && "0.99"});
     color: ${({ theme }) => theme.colors.green};
-    background-color: ${({ theme }) => theme.colors.white};
+    background-color: ${({ theme, active }) =>
+      active === "true" ? "transparent" : theme.colors.black}10;
   }
 `;
 
@@ -64,9 +72,8 @@ export const LoadingContainer = styled.div`
   flex-flow: column;
   justify-content: center;
   align-items: center;
-  max-width: 600px;
   width: 100%;
-  height: 350px;
+  height: 100%;
   box-sizing: border-box;
   border: 3px solid ${({ theme }) => theme.colors.white};
   border-radius: 8px;
@@ -82,24 +89,108 @@ export const LoadingContainer = styled.div`
   }
 `;
 
+export const PreviewWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 950px;
+  height: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+`;
+
 export const MapPoster = styled(Image)`
-  max-width: 600px;
   width: 100%;
-  height: 350px;
+  height: 100%;
   box-sizing: border-box;
   border: 3px solid ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.green}80;
   border-radius: 8px;
   object-fit: cover;
 `;
 
-export const VisuName = styled.h3`
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: ${({ theme }) => theme.colors.white};
+export const ExpandBox = styled(Link)`
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  bottom: 1rem;
+  left: 1rem;
+  background-color: ${({ theme }) => theme.colors.white};
+  opacity: 0.8;
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  z-index: 1;
+  transition: 0.3s;
+
+  &:hover {
+    scale: 1.1;
+  }
+`;
+
+export const VisuHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  align-items: center;
+`;
+
+export const VisuName = styled.h3<{ active: string }>`
+  align-self: flex-start;
+  font-size: 1.1rem;
+  color: ${({ theme, active }) =>
+    active === "true" ? theme.colors.green : theme.colors.black};
+`;
+
+export const Description = styled.p<{ active?: string }>`
+  color: ${({ theme }) => theme.colors.black};
+  text-align: left;
+  max-height: ${({ active }) => (active === "true" ? "200px" : "0")};
+  opacity: ${({ active }) => (active === "true" ? "1" : "0")};
+  overflow: hidden;
+  transition:
+    max-height 1s ease,
+    opacity 1s ease;
+  margin: 0;
+  margin-top: ${({ active }) => (active === "true" ? "1rem" : "0")};
+  font-size: 0.9rem;
+`;
+
+export const IconWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const VisuIcon = styled(Icon)<{ active?: string }>`
+  width: 100%;
+  height: 100%;
+  color: ${({ theme, active }) =>
+    active === "true" ? theme.colors.green : theme.colors.black};
+`;
+
+export const Divider = styled.div`
+  height: 20px;
+  border-left: 1px solid ${({ theme }) => theme.colors.black}20;
+  margin: 0 1rem;
 `;
 
-export const Description = styled.p`
-  color: ${({ theme }) => theme.colors.white};
-  text-align: center;
-  max-width: 600px;
+export const LinkButton = styled(Link)<{ active?: string }>`
+  color: ${({ theme, active }) =>
+    active === "true" ? theme.colors.green : theme.colors.black};
+  cursor: pointer;
+  width: 100%;
+  text-align: flex-end;
+  transition: 0.3s;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: normal;
+  border-radius: 4px;
+
+  &:hover {
+    opacity: 0.7;
+    text-decoration: underline;
+  }
 `;