Feat/issue-19

BlueMosaic/src/components/FrameSVG.tsx

@@ -12,9 +12,10 @@ export const Frame = ({ imageUrl, text="text" }) => {
 
 const FrameWrapper = styled.div`
 display: flex;
-width: 28.1875rem;
-height: 31.321rem;
+width: 45vh;
+height: 50vh;
 padding: 1.25rem 1.875rem;
+margin-bottom: 10rem;
 flex-direction: column;
 justify-content: center;
 align-items: center;

BlueMosaic/src/components/Toast.tsx

@@ -0,0 +1,101 @@
+import styled from "@emotion/styled"
+import GoogleOneSVG from "../assets/GoogleOne.svg"
+import { Button } from "./common/Button"
+
+export const Toast = ({ found, points, handleClickUpload, handleGoto }) => {
+
+  return(
+    <ToastWrappaer>
+      <Left>
+        <img src={GoogleOneSVG} alt="GoogleOneSVG"/>
+      </Left>
+      <MainContent>
+        <MainText>
+          <em>I found {found}!</em>
+          <p>My score is {points}</p>
+        </MainText>
+
+        <Button.Wrapper>
+          <Button.setButton text="Upload" buttonType="secondary" onClick={handleClickUpload}/>
+          <Button.setButton text="Collection" buttonType="primary" onClick={handleGoto}/>
+        </Button.Wrapper>
+      </MainContent>
+
+    </ToastWrappaer>
+  )
+}
+
+const ToastWrappaer = styled.section`
+position: absolute;
+bottom: 2rem;
+right: 2rem;
+z-index: 1000;
+
+display: flex;
+width: 22.4375rem;
+align-items: center;
+flex-shrink: 0;
+border-radius: 0.5rem;
+border: 1px solid #E8EAED;
+box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
+
+transition: right 0.3s ease; 
+`
+const Left = styled.section`
+display: flex;
+padding: 4.3125rem 1.75rem;
+align-items: flex-start;
+gap: 0.5rem;
+flex-shrink: 0;
+border-right: 1px solid #E8EAED;
+background: var(----white-color, #FFF);
+
+img {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+}
+`
+
+const MainContent = styled.section`
+  display: flex;
+  width: 16.875rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.125rem;
+  flex-shrink: 0;
+  align-self: stretch;
+  background: var(----white-color, #FFF);
+  box-sizing: border-box;
+  padding: 1rem;
+`
+const MainText = styled.div`
+display: flex;
+flex-direction: column;
+align-items: flex-start;
+gap: 0.25rem;
+align-self: stretch;
+
+em {
+  color: #3C4043;
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.6875rem; /* 192.857% */
+  letter-spacing: 0.00438rem;
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  color: #5F6368;
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.1875rem; /* 135.714% */
+  letter-spacing: 0.00438rem;
+  margin: 0;
+  padding: 0;
+}
+`

BlueMosaic/src/components/common/Button.tsx

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled"
+
+export const Button = {
+  Wrapper: ({ children }) => {
+    return(<ButtonWrapper>{children}</ButtonWrapper>)
+  },
+
+  setButton: ({ text, buttonType, onClick } : { text: string, buttonType: string, onClick: () => void })=> {
+    switch (buttonType) {
+      case "primary":
+        return <ButtonType buttonType="primary" onClick={onClick}>{text}</ButtonType>;
+      case "secondary":
+        return <ButtonType buttonType="secondary" onClick={onClick}>{text}</ButtonType>;
+      default:
+        return null; // or handle other cases as needed
+  }
+  }
+}
+
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.25rem;
+  align-self: stretch;
+`
+
+const ButtonType = styled.button<{ buttonType: string }>`
+  display: flex;
+  width: 6rem;
+  height: 2.25rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(----googleblue-color, #4285F4);
+
+  /* Use conditional styling based on the type prop */
+  background-color: ${(props) => (props.buttonType === 'primary' ? '#1A73E8' : '#ffffff')};
+  color: ${(props) => (props.buttonType === 'primary' ? '#ffffff' : '#5F6368')};
+
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;

BlueMosaic/src/components/dashboard/Dashboard.tsx

@@ -2,21 +2,25 @@ import styled from "@emotion/styled"
 import GoogleSVG from "../../assets/Google.svg"
 import { Search } from "./Search"
 
-export const Dashboard = () => {
+interface PageItemProps {
+  active?: boolean;
+}
+
+export const Dashboard = ({ currentPage, children }) => {
+
 
   return(
   <DashboardWrapper>
     <DashboardSidebar>
       <ol>
-        <ol>Dashboard</ol>
-        <ol>Advanced Quarry</ol>
-        <ol>Event</ol>
+        <PageItem active={currentPage === "Friend"}>Friend</PageItem>
+        <PageItem active={currentPage === "Collection"}>Collection</PageItem>
+        <PageItem active={currentPage === "Event"}>Event</PageItem>
       </ol>
 
     </DashboardSidebar>
     <DashboardContainer>
-      <img src={GoogleSVG} alt="google"/>
-      <Search/>
+      {children}
     </DashboardContainer>
 
   </DashboardWrapper>
@@ -40,33 +44,37 @@ box-shadow: 0px 40px 48px 0px rgba(50, 50, 71, 0.25), 0px 24px 24px 0px rgba(50,
 
 const DashboardSidebar = styled.section`
 width: 100%;
-height: 5rem;
+height: 3rem;
 flex-shrink: 0;
 
 ol {
   display: inline-flex;
   align-items: center;
   gap: 2.5rem;
-  color: var(----googleGray-color, #DFE1E5);
-font-feature-settings: 'clig' off, 'liga' off;
+  font-feature-settings: 'clig' off, 'liga' off;
 
-/* Body/Paragraph - 16px - SB */
-font-family: Poppins;
-font-size: 1rem;
-font-style: normal;
-font-weight: 600;
-line-height: 1.5rem; /* 150% */
-}
+  padding-inline-start: 1rem;
+  font-family: Poppins;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.5rem; 
+  }
 `
 
 const DashboardContainer = styled.section`
 box-sizing: border-box;
 width: 100%;
+height: 100%;
 display: flex;
-padding: 5rem 13rem;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 1.875rem;
 flex-shrink: 0;
-`
+`
+
+const PageItem = styled.ol<PageItemProps>`
+  color: ${(props) => (props.active ? "var(--font-color)" : "var(----googleGray-color, #DFE1E5)")};
+  cursor: pointer;
+`;

BlueMosaic/src/components/dashboard/MiniFrameSVG.tsx

@@ -0,0 +1,50 @@
+import styled from "@emotion/styled"
+
+export const MiniFrameSVG = ({ handleCircleClickParent, imageUrl, date, text }) => {
+
+  return (
+    <FrameWrapper>
+      <img src={imageUrl} alt="img"/>
+      <span>{text}</span>
+      <p>{date}</p>
+    </FrameWrapper>
+    );
+}
+
+const FrameWrapper = styled.div`
+display: flex;
+max-width: 17.8125rem;
+max-height: 19.8125rem;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+flex-shrink: 0;
+box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+img {
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #D9D9D9;
+  object-fit: cover;
+  width: 100%; 
+  height: 100%; 
+  box-sizing: border-box;
+}
+
+span {
+  align-self: stretch;
+  color: var(----font-color, #00276F);
+  text-align: center;
+  font-family: "Potta One";
+  font-size: 1.5rem;
+}
+
+p {
+  color: var(----font-color, #00276F);
+  text-align: right;
+  font-family: "Potta One";
+  font-size: 1rem;
+  margin: 0;
+  margin-left: auto;
+}
+`