From 234e31af56c206fc2044322a9b71e7611d73977b Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:07:16 -0300 Subject: [PATCH 01/19] build: add react lottie library --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 7d88fcb..aab7448 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.8", + "@types/react-lottie": "^1.2.6", "@vitejs/plugin-react": "^3.0.0", "axios": "^1.2.1", "eslint": "8.26.0", @@ -27,6 +28,7 @@ "react-dom": "18.2.0", "react-hook-form": "^7.41.0", "react-icons": "^4.6.0", + "react-lottie": "^1.2.3", "react-query": "^3.39.2", "sharp": "^0.31.3", "styled-components": "^5.3.6", From 2815e667b2ccb66291d7ec05e90b02fd5e34426e Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:07:39 -0300 Subject: [PATCH 02/19] build: add new absolute paths: services and lottie directory's --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 185a128..4831cff 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,8 @@ "@style/*": ["src/styles/*"], "@utilis/*": ["src/utils/*"], "@auth": ["src/@types/auth.d.ts"], - "@services/*": ["src/global/services/*"] + "@services/*": ["src/global/services/*"], + "@lottie/*": ["src/global/lottie/*"] }, "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], From 55664d12676f92d3abe735359018890ec4e54141 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:08:10 -0300 Subject: [PATCH 03/19] build: handle yarn.lock content --- yarn.lock | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/yarn.lock b/yarn.lock index 3cf12b9..b88b1fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -787,6 +787,13 @@ dependencies: "@types/react" "*" +"@types/react-lottie@^1.2.6": + version "1.2.6" + resolved "https://registry.yarnpkg.com/@types/react-lottie/-/react-lottie-1.2.6.tgz#4f351dfdf5f93a46a3a9714fbb319f1e0f030eaf" + integrity sha512-fvGJHD7SeUdVESHo7f7erRnXkTWaa/6Mo5TB+R0/ieSftKoFspA4sMlF2qMH6BljXI7ehFJbBtrD5bzDxPCkGg== + dependencies: + "@types/react" "*" + "@types/react@*": version "18.0.26" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917" @@ -1089,6 +1096,14 @@ babel-plugin-syntax-jsx@^6.18.0: resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g== + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -1313,6 +1328,11 @@ core-js-pure@^3.25.1: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.27.0.tgz#091dce4799a5aad4cfde930ea747b0a1962388c5" integrity sha512-fJml7FM6v1HI3Gkg5/Ifc/7Y2qXcJxaDwSROeZGAZfNykSTvUk94WT55TYzJ2lFHK0voSr/d4nOVChLuNCWNpA== +core-js@^2.4.0: + version "2.6.12" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" + integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== + cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -2640,6 +2660,11 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +lottie-web@^5.1.3: + version "5.10.1" + resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.10.1.tgz#fde8e6be374afc3906f78b4152ada9be44ce3ccf" + integrity sha512-u17bVNf/vA3oK9Wkyb1Vpo83WUIEQwaT0GeEN0qcvaExizyJ/RjmcbjSDj0CnwQCtpGqTgYhqprCC7cTWuXMNw== + loupe@^2.3.1: version "2.3.6" resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.6.tgz#76e4af498103c532d1ecc9be102036a21f787b53" @@ -3235,6 +3260,14 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-lottie@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1" + integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA== + dependencies: + babel-runtime "^6.26.0" + lottie-web "^5.1.3" + react-query@^3.39.2: version "3.39.2" resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f" @@ -3273,6 +3306,11 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== + regenerator-runtime@^0.13.11: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" From 553dab32c59d6c6b0a6f320ce6fc68128d44b955 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:10:34 -0300 Subject: [PATCH 04/19] refactor: change localState to open modal. Use useReducer global state --- src/components/FC/ModalLanguages/index.tsx | 25 +++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/FC/ModalLanguages/index.tsx b/src/components/FC/ModalLanguages/index.tsx index 045f012..2b9ceb7 100644 --- a/src/components/FC/ModalLanguages/index.tsx +++ b/src/components/FC/ModalLanguages/index.tsx @@ -1,17 +1,16 @@ import { Modal } from '@components/UI/Modal'; -import React, { Dispatch, SetStateAction, useMemo } from 'react'; +import { UserActionsContext } from '@context/userActions'; +import React, { useContext, useMemo } from 'react'; import { useState } from 'react'; import { languages } from 'src/global/data/languages'; import * as S from './style'; -interface IModalLanguages { - setState: Dispatch>; -} - -export const ModalLanguages: React.FC = ({ setState }) => { +export const ModalLanguages: React.FC = () => { const [inputValue, setInputValue] = useState(''); const [languagesSelected, setLanguagesSelected] = useState(['']); + const { globalComponentsState, dispatchGlobalComponents } = + useContext(UserActionsContext); let filteredLanguages = languages.filter((item) => item.name.includes(inputValue) @@ -38,14 +37,20 @@ export const ModalLanguages: React.FC = ({ setState }) => { } else { let userJson = JSON.parse(tmpUser); userJson = { ...userJson, languages: languagesSelected }; - localStorage.setItem('@USER_CREDENTIALS', JSON.stringify(userJson)); + return localStorage?.setItem( + '@USER_CREDENTIALS', + JSON.stringify(userJson) + ); } - setState(false); + dispatchGlobalComponents(handleLanguagesUser()); }; return ( - + = ({ setState }) => { { if (target.checked) From 03be79e0d635745118584c732b2a3ef5dd06e280 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:11:24 -0300 Subject: [PATCH 05/19] feat(global): create Global button component to increase development development --- src/components/UI/buttons/Button/index.tsx | 26 +++++++++++++++++ src/components/UI/buttons/Button/style.ts | 33 ++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/UI/buttons/Button/index.tsx create mode 100644 src/components/UI/buttons/Button/style.ts diff --git a/src/components/UI/buttons/Button/index.tsx b/src/components/UI/buttons/Button/index.tsx new file mode 100644 index 0000000..2f8cebd --- /dev/null +++ b/src/components/UI/buttons/Button/index.tsx @@ -0,0 +1,26 @@ +import { darkTheme } from '@style/theme'; +import React, { MouseEvent, ReactNode } from 'react'; +import * as S from './style'; + +export interface PropsBtn { + color?: keyof typeof darkTheme; + bg?: string; + radius?: string; + svgDirection?: 'left' | 'right'; + svgColor?: keyof typeof darkTheme; + borderColor?: string; + boxShadow?: string; +} + +interface IButton extends PropsBtn { + children: ReactNode; + onClick: (e: MouseEvent) => void; +} + +export const Button: React.FC = (props) => { + return ( + + {props.children} + + ); +}; diff --git a/src/components/UI/buttons/Button/style.ts b/src/components/UI/buttons/Button/style.ts new file mode 100644 index 0000000..73a29e4 --- /dev/null +++ b/src/components/UI/buttons/Button/style.ts @@ -0,0 +1,33 @@ +import styled from 'styled-components'; +import { PropsBtn } from '.'; + +export const Container = styled.button` + height: 100%; + cursor: pointer; + padding: 0.3rem 0.6rem; + background: ${({ bg, theme }) => (bg ? bg : theme.primaryColor)}; + color: ${({ color, theme }) => (color ? theme[color] : '#000')}; + box-shadow: ${({ boxShadow }) => boxShadow}; + + border-radius: ${({ radius }) => (radius ? radius : '30px')}; + + display: flex; + align-items: center; + border: 1px solid ${({ borderColor, bg }) => (borderColor ? borderColor : bg)}; + + svg { + width: 20px; + height: 20px; + fill: ${({ svgColor, theme }) => (svgColor ? theme[svgColor] : '#000')}; + } + + p { + color: inherit; + margin-left: ${({ svgDirection }) => + svgDirection === 'left' ? '10px' : 0}; + margin-right: ${({ svgDirection }) => + svgDirection === 'right' ? '10px' : 0}; + font-size: 1rem; + font-family: 'Montserrat', sans-serif; + } +`; From 6a7581fe872d35d34a7d6b756ae6d6b703786dfc Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:11:53 -0300 Subject: [PATCH 06/19] refactor: add props to get fullpage as optional recurse --- src/components/UI/Layout/index.tsx | 5 +++-- src/components/UI/Layout/style.ts | 8 ++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/UI/Layout/index.tsx b/src/components/UI/Layout/index.tsx index ffa6b92..faf8952 100644 --- a/src/components/UI/Layout/index.tsx +++ b/src/components/UI/Layout/index.tsx @@ -23,9 +23,10 @@ import { handleChatState } from 'src/reducers/globalComponentsReducer/actions'; interface ILayout { children: ReactNode; + fill?: boolean; } -export const Layout: React.FC = ({ children }) => { +export const Layout: React.FC = ({ children, fill }) => { const { theme, themeToggler } = useContext(ThemeContext); const { globalComponentsState, dispatchGlobalComponents } = useContext(UserActionsContext); @@ -80,7 +81,7 @@ export const Layout: React.FC = ({ children }) => { aaa - {children} + {children} {navList.map((item) => ( props.theme.primaryBg}; @@ -8,8 +12,8 @@ export const Container = styled.div` height: 100%; `; -export const PageContainer = styled.div` - max-width: 80rem; +export const PageContainer = styled.div` + max-width: ${(props) => (props.fill ? 'none' : '80rem')}; padding-right: 4rem; margin: 0 auto; min-height: calc(${(props) => props.theme.maxHeight} - 4rem); From 036e3af8e8fa546ebf6737849846ca8c7ead984d Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:32:25 -0300 Subject: [PATCH 07/19] static: add lottie love animation --- src/global/lottie/love_reactions.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/global/lottie/love_reactions.json diff --git a/src/global/lottie/love_reactions.json b/src/global/lottie/love_reactions.json new file mode 100644 index 0000000..dec3d01 --- /dev/null +++ b/src/global/lottie/love_reactions.json @@ -0,0 +1 @@ +{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":36.0000014663101,"w":1080,"h":1000,"nm":"Main","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"main_heart 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[361]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[42.333,-58.667,0],"ti":[-42.333,58.667,0]},{"t":24.00000097754,"s":[794,148,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"main_heart 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[64]},{"t":24.00000097754,"s":[361]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[-38,-66.333,0],"ti":[38,66.333,0]},{"t":24.00000097754,"s":[312,102,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"main_heart 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":181,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[12.333,-34,0],"ti":[-12.333,34,0]},{"t":24.00000097754,"s":[614,296,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"main_heart 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[181]},{"t":24.00000097754,"s":[541]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[-57.333,-39.333,0],"ti":[57.333,39.333,0]},{"t":24.00000097754,"s":[196,264,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"main_heart 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[139]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[66.333,-8.667,0],"ti":[-66.333,8.667,0]},{"t":24.00000097754,"s":[938,448,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"main_heart 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[361]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[-88.333,-12.333,0],"ti":[88.333,12.333,0]},{"t":24.00000097754,"s":[10,426,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"main_heart 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[361]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[-75.667,14.667,0],"ti":[75.667,-14.667,0]},{"t":24.00000097754,"s":[86,588,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"main_heart 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[292]},{"t":24.00000097754,"s":[385]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[0,18.333,0],"ti":[0,-18.333,0]},{"t":24.00000097754,"s":[540,610,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"main_heart 11","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[433]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[0,53,0],"ti":[0,-53,0]},{"t":24.00000097754,"s":[540,818,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"main_heart 10","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[361]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[41.333,21.667,0],"ti":[-41.333,-21.667,0]},{"t":24.00000097754,"s":[788,630,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"main_heart","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":24.00000097754,"s":[199]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,500,0],"to":[38.667,20.333,0],"ti":[-38.667,-20.333,0]},{"t":24.00000097754,"s":[772,622,0]}],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[25,25,100]},{"t":24.00000097754,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"main_heart","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":1,"ix":10},"p":{"a":0,"k":[540,500,0],"ix":2},"a":{"a":0,"k":[191.763,170.375,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":0,"s":[0,0,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":1,"s":[11.5,11.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":2,"s":[23,23,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":3,"s":[34.5,34.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":4,"s":[46,46,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.822,0.822,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0]},"t":5,"s":[57.5,57.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.858,0.858,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.156,0.156,0]},"t":6,"s":[69,69,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.877,0.877,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.201,0.201,0]},"t":7,"s":[82.126,82.126,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.928,0.928,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.259,0.259,0]},"t":8,"s":[91.43,91.43,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.239,0.239,1]},"o":{"x":[0.167,0.167,0.167],"y":[-0.529,-0.529,0]},"t":9,"s":[95.842,95.842,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.783,0.783,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.094,0.094,0]},"t":10,"s":[95.242,95.242,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.82,0.82,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.135,0.135,0]},"t":11,"s":[90.354,90.354,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.837,0.837,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.155,0.155,0]},"t":12,"s":[82.527,82.527,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.851,0.851,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.171,0.171,0]},"t":13,"s":[73.429,73.429,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.866,0.866,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.188,0.188,0]},"t":14,"s":[64.732,64.732,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.895,0.895,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.221,0.221,0]},"t":15,"s":[57.831,57.831,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1.05,1.05,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.398,0.398,0]},"t":16,"s":[53.649,53.649,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.729,0.729,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.031,0.031,0]},"t":17,"s":[52.541,52.541,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.807,0.807,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.12,0.12,0]},"t":18,"s":[54.308,54.308,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.829,0.829,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.146,0.146,0]},"t":19,"s":[58.296,58.296,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.844,0.844,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.163,0.163,0]},"t":20,"s":[63.565,63.565,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.858,0.858,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.179,0.179,0]},"t":21,"s":[69.08,69.08,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.878,0.878,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.201,0.201,0]},"t":22,"s":[73.892,73.892,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.93,0.93,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.261,0.261,0]},"t":23,"s":[77.29,77.29,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.304,0.304,1]},"o":{"x":[0.167,0.167,0.167],"y":[-0.454,-0.454,0]},"t":24,"s":[78.885,78.885,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.784,0.784,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.095,0.095,0]},"t":25,"s":[78.637,78.637,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.82,0.82,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.136,0.136,0]},"t":26,"s":[76.819,76.819,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.837,0.837,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.155,0.155,0]},"t":27,"s":[73.928,73.928,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.851,0.851,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.171,0.171,0]},"t":28,"s":[70.579,70.579,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.866,0.866,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.189,0.189,0]},"t":29,"s":[67.386,67.386,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.895,0.895,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.222,0.222,0]},"t":30,"s":[64.86,64.86,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1.058,1.058,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.408,0.408,0]},"t":31,"s":[63.338,63.338,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.731,0.731,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.034,0.034,0]},"t":32,"s":[62.947,62.947,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.807,0.807,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.121,0.121,0]},"t":33,"s":[63.612,63.612,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.147,0.147,0]},"t":34,"s":[65.089,65.089,100]},{"t":35.0000014255792,"s":[67.031,67.031,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[29.042,-0.225],[17.08,-13.504],[6.834,-9.562],[9.259,7.24],[21.774,-0.097],[19.64,-21.396],[-0.528,-30.016],[-23.537,-25.374],[-33.951,-27.076],[-15.463,-13.491],[-8.455,7.395],[-13.151,11.164],[-29.165,32.169],[-0.871,34.604],[19.998,22.408]],"o":[[-19.64,-21.396],[-21.773,-0.096],[-9.258,7.24],[-6.833,-9.563],[-17.079,-13.505],[-29.043,-0.225],[-19.975,22.412],[0.881,34.6],[29.166,32.174],[13.134,11.198],[8.454,7.395],[15.463,-13.592],[33.952,-27.069],[23.536,-25.381],[0.521,-30.029],[0,0]],"v":[[160.743,-137.462],[84.281,-170.713],[24.267,-150.001],[0.003,-124.667],[-24.26,-150.001],[-84.275,-170.713],[-160.737,-137.462],[-190.982,-55.919],[-153.091,37.143],[-58.26,126.162],[-14.762,163.544],[14.768,163.544],[58.284,126.162],[153.114,37.161],[190.988,-55.919],[160.692,-137.479]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.253067944097,0.334603672402,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[191.759,171.189],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"minihearts","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,500,0],"ix":2},"a":{"a":0,"k":[540,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1080,"h":1000,"ip":4.00000016292334,"op":34.0000013848484,"st":4.00000016292334,"bm":0}],"markers":[]} \ No newline at end of file From 50228c80e4c0ce3c38b5243a5368f47a0c5a43c9 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:32:55 -0300 Subject: [PATCH 08/19] refactor: rename all actions to prevent developer errors --- src/components/FC/Chat/index.tsx | 6 ++++-- src/components/FC/ModalLanguages/index.tsx | 5 ++++- src/components/UI/Layout/index.tsx | 4 ++-- src/components/UI/Modal/index.tsx | 9 +++------ 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/FC/Chat/index.tsx b/src/components/FC/Chat/index.tsx index 00bea70..c5d5cad 100644 --- a/src/components/FC/Chat/index.tsx +++ b/src/components/FC/Chat/index.tsx @@ -9,7 +9,7 @@ import { SearchFriends } from './SearchFriends'; import { listFriendsActiveMock } from './tmpMocks'; import { UserActionsContext } from '@context/userActions'; -import { handleChatState } from 'src/reducers/globalComponentsReducer/actions'; +import { handleChatStateActions } from 'src/reducers/globalComponentsReducer/actions'; import * as S from './style'; @@ -28,7 +28,9 @@ export const Chat: React.FC = () => {

Chat

- diff --git a/src/components/FC/ModalLanguages/index.tsx b/src/components/FC/ModalLanguages/index.tsx index 2b9ceb7..dc5e910 100644 --- a/src/components/FC/ModalLanguages/index.tsx +++ b/src/components/FC/ModalLanguages/index.tsx @@ -3,6 +3,7 @@ import { UserActionsContext } from '@context/userActions'; import React, { useContext, useMemo } from 'react'; import { useState } from 'react'; import { languages } from 'src/global/data/languages'; +import { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions'; import * as S from './style'; @@ -48,7 +49,9 @@ export const ModalLanguages: React.FC = () => { return ( + dispatchGlobalComponents(handleUserLanguagesActions()) + } title="Favorite tools" > diff --git a/src/components/UI/Layout/index.tsx b/src/components/UI/Layout/index.tsx index faf8952..47acd81 100644 --- a/src/components/UI/Layout/index.tsx +++ b/src/components/UI/Layout/index.tsx @@ -19,7 +19,7 @@ import { } from 'react-icons/ai'; import { useRouter } from 'next/router'; import { UserActionsContext } from '@context/userActions'; -import { handleChatState } from 'src/reducers/globalComponentsReducer/actions'; +import { handleChatStateActions } from 'src/reducers/globalComponentsReducer/actions'; interface ILayout { children: ReactNode; @@ -62,7 +62,7 @@ export const Layout: React.FC = ({ children, fill }) => { { title: 'Chat', icon: , - onClick: () => dispatchGlobalComponents(handleChatState()), + onClick: () => dispatchGlobalComponents(handleChatStateActions()), }, ]; diff --git a/src/components/UI/Modal/index.tsx b/src/components/UI/Modal/index.tsx index 1691f8c..effe875 100644 --- a/src/components/UI/Modal/index.tsx +++ b/src/components/UI/Modal/index.tsx @@ -3,14 +3,14 @@ import { AiOutlineCloseCircle } from 'react-icons/ai'; import * as S from './style'; interface IModal { - setModalState: Dispatch>; + handleModalState: any; title: string; children: ReactNode; aspectRatio?: number; maxWidth?: string; } export const Modal: React.FC = ({ - setModalState, + handleModalState, title, children, maxWidth, @@ -22,10 +22,7 @@ export const Modal: React.FC = ({

{title}

-
From a7f3e370d4ead18fe79162b9e1486b53376eb1d8 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:33:11 -0300 Subject: [PATCH 09/19] feat: create Advice page to use when app was crashed --- src/content/Advice/index.tsx | 72 +++++++++++++++++++++++++ src/content/Advice/style.ts | 101 +++++++++++++++++++++++++++++++++++ 2 files changed, 173 insertions(+) create mode 100644 src/content/Advice/index.tsx create mode 100644 src/content/Advice/style.ts diff --git a/src/content/Advice/index.tsx b/src/content/Advice/index.tsx new file mode 100644 index 0000000..c021f0b --- /dev/null +++ b/src/content/Advice/index.tsx @@ -0,0 +1,72 @@ +import { NextPage } from 'next'; +import Head from 'next/head'; +import Image from 'next/image'; +import { useContext } from 'react'; +import { IThemeContext, ThemeContext } from '../../context/theme'; +import { BsFillSunFill, BsFillMoonFill } from 'react-icons/bs'; +import Figma from '../../assets/svg/figma_logo.png'; + +import * as S from './style'; +import { NextPageAuthenticated } from '@auth'; +import Link from 'next/link'; +import { Layout } from '@components/UI/Layout'; +import { Chat } from '@components/FC/Chat'; + +const Advice: NextPageAuthenticated = () => { + const { theme, themeToggler } = useContext(ThemeContext); + + return ( + + + + + Social Dev | Advice + + + +

Calm down

+ + + + +

+ We are working hard to create a first version of social dev app +

+ + +

But..

+ You can see our figma UI design, to kill the curiosity + + + + confused anime girl gif + + Perfil pessoal + + + + ); +}; + +export default Advice; + +Advice.auth = true; diff --git a/src/content/Advice/style.ts b/src/content/Advice/style.ts new file mode 100644 index 0000000..698668b --- /dev/null +++ b/src/content/Advice/style.ts @@ -0,0 +1,101 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + width: 100%; + padding: 1rem; + + display: grid; + place-items: center; +`; + +export const AdviceContainer = styled.main` + border-radius: var(--radius); + border: 2px solid ${({ theme }) => theme.terciaryColor}; + max-width: 37.5rem; + + padding: 1rem; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto; + row-gap: 0.5rem; + grid-template-areas: + 'title title theme' + 'subtitle subtitle gif' + 'content content gif'; + + .confused-girl { + grid-area: gif; + } + + h1 { + grid-area: title; + } + h2 { + grid-area: subtitle; + } +`; + +export const ToggleTheme = styled.aside` + grid-area: theme; + + display: flex; + justify-content: flex-end; + align-items: center; + + button { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: ${({ theme }) => theme.secondaryBg}; + + display: grid; + place-items: center; + + svg { + width: 1.5rem; + height: 1.5rem; + fill: ${({ theme }) => theme.terciaryColor}; + } + } +`; +export const Section = styled.section` + grid-area: content; + + display: flex; + flex-direction: column; + + p { + font-weight: 500; + font-size: 1.4rem; + } +`; + +export const FigmaButton = styled.div` + margin-top: 1rem; + + background: rgb(0, 233, 255); + background: linear-gradient( + 84deg, + rgba(0, 233, 255, 1) 0%, + rgba(251, 52, 55, 1) 100% + ); + padding: 0.1rem; + width: 15rem; + border-radius: var(--radius); + + a { + border-radius: inherit; + padding: 0.4rem; + width: 100%; + background-color: ${({ theme }) => theme.secondaryBg}; + + display: flex; + align-items: center; + gap: 0.4rem; + + p { + font-size: 1rem; + } + } +`; From 26c9499767cbd51bd51ffad81a3d0499543911a9 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:33:42 -0300 Subject: [PATCH 10/19] refactor: add useReducer variables --- src/content/FirstAccess/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/content/FirstAccess/index.tsx b/src/content/FirstAccess/index.tsx index 4a95d07..cc0c178 100644 --- a/src/content/FirstAccess/index.tsx +++ b/src/content/FirstAccess/index.tsx @@ -11,7 +11,8 @@ import { AiOutlineArrowLeft, AiOutlineArrowRight } from 'react-icons/ai'; import { BsFillMoonFill, BsFillSunFill } from 'react-icons/bs'; import { ThemeContext } from '@context/theme'; import { ModalLanguages } from '@components/FC/ModalLanguages'; -import { parse } from 'path'; +import { UserActionsContext } from '@context/userActions'; +import { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions'; type IFirstAccess = z.infer; @@ -28,7 +29,8 @@ const schema = z.object({ const FirstAccess: NextPageAuthenticated = () => { const [showContent, setShowContent] = useState(false); const [currentStep, setCurrentStep] = useState(0); - const [languagesModal, setLanguagesModal] = useState(false); + const { globalComponentsState, dispatchGlobalComponents } = + useContext(UserActionsContext); const container = useRef(null); const { theme, setTheme } = useContext(ThemeContext); @@ -89,8 +91,6 @@ const FirstAccess: NextPageAuthenticated = () => { navigateToHomePage(); }, []); - console.log('errors', errors); - return ( {showContent && ( @@ -158,12 +158,14 @@ const FirstAccess: NextPageAuthenticated = () => { - - {languagesModal && ( - - )} + {globalComponentsState.languages && } From 4d785d311a5fa06c81a117de95bb8fe70c329a93 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:34:24 -0300 Subject: [PATCH 11/19] refactor: add usersPosts in list --- src/content/Home/index.tsx | 79 +++++++++------------------- src/content/Home/style.ts | 103 ++++++------------------------------- 2 files changed, 40 insertions(+), 142 deletions(-) diff --git a/src/content/Home/index.tsx b/src/content/Home/index.tsx index ad142f3..ce3f489 100644 --- a/src/content/Home/index.tsx +++ b/src/content/Home/index.tsx @@ -1,67 +1,34 @@ -import { NextPage } from 'next'; -import Head from 'next/head'; -import Image from 'next/image'; -import { useContext } from 'react'; -import { IThemeContext, ThemeContext } from '../../context/theme'; -import { BsFillSunFill, BsFillMoonFill } from 'react-icons/bs'; -import Figma from '../../assets/svg/figma_logo.png'; - -import * as S from './style'; import { NextPageAuthenticated } from '@auth'; -import Link from 'next/link'; -import { Layout } from '@components/UI/Layout'; import { Chat } from '@components/FC/Chat'; +import { ModalLanguages } from '@components/FC/ModalLanguages'; +import { Layout } from '@components/UI/Layout'; +import { UserActionsContext } from '@context/userActions'; +import React, { Suspense, useContext } from 'react'; +import { BasicUserInfo } from './BasicUserInfo'; +import { InternalUserArticle } from './InternalUserArticle'; +import * as S from './style'; + +const arr = [false, true, false, false, true, true, true, true]; const Home: NextPageAuthenticated = () => { - const { theme, themeToggler } = useContext(ThemeContext); + const { globalComponentsState } = useContext(UserActionsContext); return ( - + - - - Social Dev | Advice - - - -

Calm down

- - - - -

- We are working hard to create a first version of social dev app -

- -

But..

- You can see our figma UI design, to kill the curiosity - - - - confused anime girl gif - - Perfil pessoal - + {globalComponentsState.languages && } + +
+ +
+ + + {arr.map((item) => ( + + ))} + + ); diff --git a/src/content/Home/style.ts b/src/content/Home/style.ts index 698668b..a3cc990 100644 --- a/src/content/Home/style.ts +++ b/src/content/Home/style.ts @@ -2,100 +2,31 @@ import styled from 'styled-components'; export const Container = styled.div` width: 100%; - padding: 1rem; - - display: grid; - place-items: center; -`; - -export const AdviceContainer = styled.main` - border-radius: var(--radius); - border: 2px solid ${({ theme }) => theme.terciaryColor}; - max-width: 37.5rem; - - padding: 1rem; + height: 100%; display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: auto; - row-gap: 0.5rem; - grid-template-areas: - 'title title theme' - 'subtitle subtitle gif' - 'content content gif'; + grid-template-columns: 20rem 1fr; + gap: 0.5rem; + padding-left: 1rem; - .confused-girl { - grid-area: gif; - } - - h1 { - grid-area: title; - } - h2 { - grid-area: subtitle; + @media (max-width: 1000px) { + grid-template-columns: 1fr; + padding-left: 0; } `; -export const ToggleTheme = styled.aside` - grid-area: theme; - - display: flex; - justify-content: flex-end; - align-items: center; - - button { - width: 3rem; - aspect-ratio: 1/1; - border-radius: 50%; - background-color: ${({ theme }) => theme.secondaryBg}; - - display: grid; - place-items: center; - - svg { - width: 1.5rem; - height: 1.5rem; - fill: ${({ theme }) => theme.terciaryColor}; - } - } +export const PageContent = styled.main` + max-width: 80rem; + width: 100%; + height: 100%; + margin: 0 auto; + padding: 1rem; `; -export const Section = styled.section` - grid-area: content; +export const ListInternalArticles = styled.ul` + padding-bottom: 5rem; display: flex; flex-direction: column; - - p { - font-weight: 500; - font-size: 1.4rem; - } -`; - -export const FigmaButton = styled.div` - margin-top: 1rem; - - background: rgb(0, 233, 255); - background: linear-gradient( - 84deg, - rgba(0, 233, 255, 1) 0%, - rgba(251, 52, 55, 1) 100% - ); - padding: 0.1rem; - width: 15rem; - border-radius: var(--radius); - - a { - border-radius: inherit; - padding: 0.4rem; - width: 100%; - background-color: ${({ theme }) => theme.secondaryBg}; - - display: flex; - align-items: center; - gap: 0.4rem; - - p { - font-size: 1rem; - } - } + align-items: center; + gap: 1rem; `; From b2be79b04c86ab1a7abf6aa56c1a96947b6d55b8 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:35:37 -0300 Subject: [PATCH 12/19] feat: create small component to share base user information in home page --- src/content/Home/BasicUserInfo/index.tsx | 108 +++++++++++++++++++++++ src/content/Home/BasicUserInfo/style.ts | 102 +++++++++++++++++++++ 2 files changed, 210 insertions(+) create mode 100644 src/content/Home/BasicUserInfo/index.tsx create mode 100644 src/content/Home/BasicUserInfo/style.ts diff --git a/src/content/Home/BasicUserInfo/index.tsx b/src/content/Home/BasicUserInfo/index.tsx new file mode 100644 index 0000000..36e7627 --- /dev/null +++ b/src/content/Home/BasicUserInfo/index.tsx @@ -0,0 +1,108 @@ +import { Button } from '@components/UI/buttons/Button'; +import { useSession } from 'next-auth/react'; +import Image from 'next/image'; +import Link from 'next/link'; +import React, { useContext, useState } from 'react'; +import { AiOutlineUser } from 'react-icons/ai'; +import { languages } from 'src/global/data/languages'; +import { IoMdAddCircleOutline } from 'react-icons/io'; + +import * as S from './style'; +import { UserActionsContext } from '@context/userActions'; +import { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions'; + +export const BasicUserInfo: React.FC = () => { + const { data: session } = useSession(); + const { dispatchGlobalComponents } = useContext(UserActionsContext); + + let userStorage = + typeof window !== 'undefined' + ? localStorage?.getItem('@USER_CREDENTIALS') + : null; + + const transformLanguagesArray: any = () => { + return languages.reduce((prev, acc) => ({ ...prev, [acc.name]: acc }), {}); + }; + + return ( + + {session && ( + <> + + +
+
+ {session?.user?.image ? ( + user avatar + ) : ( + + + + )} +
+ {userStorage && ( +
+

{session?.user?.name}

+

{JSON.parse(userStorage).job}

+
+ )} +
+ +
+

Conections

+ + ............................................................................................................................. + +

12

+
+
+

Saved Articles

+ + ............................................................................................................................. + +

6

+
+ + + + + + Languages + {userStorage && JSON.parse(userStorage).languages?.length !== 0 ? ( +
    + {JSON.parse(userStorage).languages?.map((item: string) => { + let currentLanguage = transformLanguagesArray()[item]; + return ( +
  • + {currentLanguage && } +
    • + ); + })} +
+ ) : ( +

No language added :(

+ )} + + + + + )} + + ); +}; diff --git a/src/content/Home/BasicUserInfo/style.ts b/src/content/Home/BasicUserInfo/style.ts new file mode 100644 index 0000000..62d0000 --- /dev/null +++ b/src/content/Home/BasicUserInfo/style.ts @@ -0,0 +1,102 @@ +import styled from 'styled-components'; + +export const Container = styled.aside` + position: fixed; + width: 100%; + max-width: 20rem; + + padding: 0.5rem; + display: flex; + flex-direction: column; + gap: 1rem; + + @media (max-width: 1000px) { + display: none; + } +`; + +export const User = styled.section` + border-radius: ${(props) => props.theme.radius}; + background-color: ${(props) => props.theme.secondaryBg}; + padding: 1rem 0.8rem; + + header { + display: flex; + align-items: center; + gap: 0.5rem; + + article { + background-color: ${(props) => props.theme.primaryBg}; + flex: 0 4rem; + aspect-ratio: 1/1; + border-radius: 50%; + + display: grid; + place-items: center; + + img { + width: 100%; + height: 100%; + border-radius: inherit; + } + svg { + width: 2rem; + height: 2rem; + } + } + + section { + flex: 1; + display: flex; + flex-direction: column; + + h4 { + max-width: 14rem; + color: ${(props) => props.theme.primaryColor}; + padding-bottom: 0.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +`; + +export const UserConnections = styled.section` + padding-top: 2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + + div { + display: flex; + justify-content: space-between; + gap: 0.5rem; + + p:nth-child(3) { + color: ${(props) => props.theme.secondaryColor}; + } + span { + width: auto; + overflow: hidden; + flex: 1; + } + } +`; + +export const LanguagesContainer = styled.section` + border-radius: ${(props) => props.theme.radius}; + background-color: ${(props) => props.theme.secondaryBg}; + + padding: 1rem; + + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + strong { + font-size: 1rem; + color: ${(props) => props.theme.terciaryColor}; + } +`; From 4564d45563c5079a6faefc58ff4225d059dcf6a3 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:36:02 -0300 Subject: [PATCH 13/19] feat: create InternalUserArticle component to show all post posted on platform --- .../Home/InternalUserArticle/index.tsx | 118 +++++++++++ src/content/Home/InternalUserArticle/style.ts | 188 ++++++++++++++++++ 2 files changed, 306 insertions(+) create mode 100644 src/content/Home/InternalUserArticle/index.tsx create mode 100644 src/content/Home/InternalUserArticle/style.ts diff --git a/src/content/Home/InternalUserArticle/index.tsx b/src/content/Home/InternalUserArticle/index.tsx new file mode 100644 index 0000000..71e4859 --- /dev/null +++ b/src/content/Home/InternalUserArticle/index.tsx @@ -0,0 +1,118 @@ +import { Button } from '@components/UI/buttons/Button'; +import { useSession } from 'next-auth/react'; +import Image from 'next/image'; +import React, { useCallback, useEffect, useState } from 'react'; +import { AiFillHeart, AiOutlineShareAlt, AiOutlineUser } from 'react-icons/ai'; +import { IoAddOutline } from 'react-icons/io5'; +import Lottie from 'react-lottie'; +import loveReaction from '@lottie/love_reactions.json'; + +import * as S from './style'; + +const postDataJSON = { + isShared: true, + user: { + name: 'João Ribeiro Monteiro ', + id: 3427678643, + job: 'Co-founder and CEO of Tesla', + title: 'Sharing in my network', + content: 'Lorem ipsum dolor si a met', + }, + author: { + name: 'Guilherme Santos Coelho', + id: 723468744, + title: 'React is amazing', + content: + 'Quis aliqua mollit occaecat dolore adipisicing consequat ullamco eu. Officia laborum sunt esse nulla aliquip deserunt non labore tempor aliqua aliqua ea amet. Enim cupidatat dolore sunt anim nulla magna occaecat dolor consectetur adipisicing incididunt proident nostrud. Ullamco sit ipsum ullamco mollit adipisicing esse aliquip aliquip. Velit sit ullamco minim eu Lorem dolore ullamco est do sint. Officia qui consectetur magna ea consequat eu.', + }, +}; + +interface IUserArticle { + shared: boolean; +} +export const InternalUserArticle: React.FC = ({ shared }) => { + const { data: sessionData } = useSession(); + + const [postActions, setPostActions] = useState({ + love: false, + createdBy: null, + }); + + const defaultOptions = { + loop: false, + autoplay: true, + animationData: loveReaction, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, + }; + + return ( + + + {sessionData?.user?.image ? ( + Avatar user + ) : ( + + + + )} +
+

{postDataJSON.user.name}

+

{postDataJSON.user.job}

+
+ + + {shared ? ( + + {postDataJSON.user.title} + {postDataJSON.user.content} + + ) : null} + +
+ +
+ + + + + + {shared && ( +

+ This post was created by guicoelhodev +

+ )} + {postDataJSON.author.title} + {postDataJSON.author.content} + + + ); +}; diff --git a/src/content/Home/InternalUserArticle/style.ts b/src/content/Home/InternalUserArticle/style.ts new file mode 100644 index 0000000..aa9b8aa --- /dev/null +++ b/src/content/Home/InternalUserArticle/style.ts @@ -0,0 +1,188 @@ +import styled from 'styled-components'; + +interface IStyle { + shared?: boolean; +} + +interface ICard { + loveAction: boolean; +} + +export const Container = styled.article` + max-width: 50rem; + width: 100%; + + background-color: ${(props) => props.theme.secondaryBg}; + border-radius: ${(props) => props.theme.radius}; + + position: relative; + + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-columns: repeat(3, 1fr); + + grid-template-areas: 'a a a b b b'; +`; + +export const UserInfo = styled.section` + grid-area: a; + + padding: 0.6rem; + + display: flex; + gap: 0.8rem; + + img, + span { + width: 50px; + height: 50px; + border-radius: 50%; + background-color: ${(props) => props.theme.secondaryBg}; + } + + span { + display: grid; + place-items: center; + + svg { + width: 1.8rem; + height: 1.8rem; + } + } + + article { + margin: auto 0; + + p { + max-width: 20rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + p:nth-child(1) { + font-weight: 600; + } + p:nth-child(2) { + padding-top: 0.5rem; + font-weight: 400; + font-size: 0.9rem; + opacity: 0.95; + } + } + + @media (max-width: 500px) { + article > p { + max-width: 14rem; + } + } + @media (max-width: 500px) { + article > p { + max-width: 12rem; + } + } +`; + +export const FollowUserContainer = styled.section` + grid-area: b; + padding: 1rem 0.5rem 0 0; + width: 100%; + + display: flex; + align-items: center; + gap: 0.5rem; + + button:nth-child(2), + button:nth-child(3) { + background-color: transparent; + padding-top: 0.2rem; + padding: 0.2rem; + border: 0; + + svg { + width: 1.8rem; + height: 1.8rem; + } + } + + button:nth-child(3) { + svg { + transition: all 0.2s; + fill: ${(props) => (props.loveAction ? '#FF4055' : '#ccc')}; + } + } + + @media (max-width: 550px) { + padding-top: 0; + padding-bottom: 0.5rem; + grid-row: 454; + align-content: center; + + button:nth-child(1) { + position: absolute; + top: 20px; + right: 10px; + height: auto; + border: 0; + } + } +`; + +export const Title = styled.h3` + grid-column: span 6; + font-size: '1rem'; + color: ${(props) => props.theme.primaryColor}; + + padding: 0.6rem; + padding-left: ${(props) => (props.shared ? '1rem' : '0.5rem')}; +`; + +export const Description = styled.p` + grid-column: span 6; + font-size: 1rem; + padding: 0.6rem; + padding-left: ${(props) => (props.shared ? '1rem' : '0.5rem')}; ; +`; + +export const LoveContainer = styled.div` + position: relative; + width: 2rem; + height: 2rem; + + * { + position: absolute; + left: 0; + } +`; + +export const SharedContent = styled.section` + width: calc(100% - 2rem); + margin: 0 auto; + grid-column: span 6; + padding: 0.5rem 0; + + border-bottom: 1px dashed ${(props) => props.theme.primaryColor}; + + h3, + p { + padding-left: 0; + } +`; + +export const PostContent = styled.section` + border-radius: inherit; + grid-column: span 6; + background-color: ${({ theme, shared }) => + shared ? theme.primaryBg : theme.secondaryBg}; + + width: ${(props) => (props.shared ? 'calc(100% - 30px)' : '100%')}; + margin: ${(props) => (props.shared ? '20px' : '0')} auto; + padding: ${(props) => (props.shared ? 0 : '0.6rem')}; + + p:nth-child(1) { + padding: 0.6rem; + } + + strong { + color: ${(props) => props.theme.secondaryColor}; + } +`; From 324c02c9ac43c338555b7645a71b25c364354046 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:36:26 -0300 Subject: [PATCH 14/19] refactor: remove unused variables --- src/content/Login/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/content/Login/index.tsx b/src/content/Login/index.tsx index 973b34a..4024a7e 100644 --- a/src/content/Login/index.tsx +++ b/src/content/Login/index.tsx @@ -1,16 +1,10 @@ -import { NextPage } from 'next'; import { Background } from '@pages/Login/Background'; import { SignIn } from '@pages/Login/SignIn'; -import { useSession } from 'next-auth/react'; import * as S from './style'; import { NextPageAuthenticated } from '@auth'; const LoginPage: NextPageAuthenticated = () => { - const { data, status } = useSession(); - - console.log(status); - return ( {/* */} From e9d726eb5a4101faeda1b8eb3c74bf3a8455ad81 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:36:58 -0300 Subject: [PATCH 15/19] refactor: add useReducer variable --- src/content/Profile/index.tsx | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/content/Profile/index.tsx b/src/content/Profile/index.tsx index 8e2ac32..ea7dbdd 100644 --- a/src/content/Profile/index.tsx +++ b/src/content/Profile/index.tsx @@ -1,30 +1,23 @@ import { NextPageAuthenticated } from '@auth'; import { useSession } from 'next-auth/react'; -import { - DiAngularSimple, - DiJava, - DiJavascript1, - DiReact, - DiApple, - DiAws, -} from 'react-icons/di'; -import React, { useMemo } from 'react'; +import React, { useContext, useMemo } from 'react'; import * as S from './style'; import { AiFillEdit } from 'react-icons/ai'; import { Layout } from '@components/UI/Layout'; import { NetworkList } from './NetworkList'; import { RepositoryList } from './RepositoryList'; -import { Modal } from '@components/UI/Modal'; -import { useState } from 'react'; import { ModalLanguages } from '../../components/FC/ModalLanguages'; import { SimpleCarousel } from '@components/UI/carousels'; import { languages } from 'src/global/data/languages'; import { Chat } from '@components/FC/Chat'; +import { UserActionsContext } from '@context/userActions'; +import { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions'; const Profile: NextPageAuthenticated = () => { const { data } = useSession(); - const [languagesModal, setLanguagesModal] = useState(false); + const { globalComponentsState, dispatchGlobalComponents } = + useContext(UserActionsContext); const user = useMemo(() => { if (typeof window !== 'undefined') { @@ -90,13 +83,18 @@ const Profile: NextPageAuthenticated = () => { {user?.languages?.map((item: string) => { let currentLanguage = transformLanguagesArray()[item]; return ( -
  • - {} +
  • + {currentLanguage && }
    • ); })} - setLanguagesModal(true)}> + + dispatchGlobalComponents(handleUserLanguagesActions()) + } + > @@ -105,7 +103,7 @@ const Profile: NextPageAuthenticated = () => { - {languagesModal && } + {globalComponentsState.languages && }     ); From 908a7f663d5721ef6f5b7cbc57e4c9aecb9cd5f5 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:37:27 -0300 Subject: [PATCH 16/19] feat: add new key into useReducer: languages. To managment handle user languages modal --- src/context/userActions/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/context/userActions/index.tsx b/src/context/userActions/index.tsx index 4d29912..8f1c610 100644 --- a/src/context/userActions/index.tsx +++ b/src/context/userActions/index.tsx @@ -5,6 +5,7 @@ export type IGlobalComponents = { chat: boolean; createPost: boolean; addFriend: boolean; + languages: boolean; }; type IUserActionsContext = { globalComponentsState: any; @@ -24,6 +25,7 @@ export const UserActionsProvider: FC = ({ children }) => { addFriend: false, chat: false, createPost: false, + languages: false, } ); From 2c1e351e937e349ad36e27621b1037e6a6fb1a06 Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:37:50 -0300 Subject: [PATCH 17/19] feat: add InternalUserArticle to test component --- src/pages/playground/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx index 7fa913a..231598d 100644 --- a/src/pages/playground/index.tsx +++ b/src/pages/playground/index.tsx @@ -1,4 +1,5 @@ import { Chat } from '@components/FC/Chat'; +import { InternalUserArticle } from '@pages/Home/InternalUserArticle'; import { NextPage } from 'next'; import styled from 'styled-components'; @@ -7,12 +8,14 @@ const Container = styled.div` width: 100%; display: grid; place-items: center; + + padding: 1rem; `; const Playground: NextPage = () => { return ( - + ); }; From a91b3a19a0c1eb45b3a7efe8d05a4943669e805d Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:38:22 -0300 Subject: [PATCH 18/19] feat: add new acitons to handle languages state and change action function --- src/reducers/globalComponentsReducer/actions.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/reducers/globalComponentsReducer/actions.ts b/src/reducers/globalComponentsReducer/actions.ts index db17299..8b4f3ee 100644 --- a/src/reducers/globalComponentsReducer/actions.ts +++ b/src/reducers/globalComponentsReducer/actions.ts @@ -2,16 +2,21 @@ export enum ActionsGlobalComponents { HANDLE_CHAT_STATE = 'HANDLE_CHAT_STATE', HANDLE_CREATE_POST = 'HANDLE_CREATE_POST', HANDLE_ADD_FRIEND = 'HANDLE_ADD_FRIEND', + HANDLE_LANGUAGES_STATE = 'HANDLE_LANGUAGES', } -export const handleChatState = () => { +export const handleChatStateActions = () => { return { type: ActionsGlobalComponents.HANDLE_CHAT_STATE }; }; -export const handleCreatPostState = () => { +export const handleCreatPostStateActions = () => { return { type: ActionsGlobalComponents.HANDLE_CREATE_POST }; }; -export const handleAddFriend = () => { +export const handleAddFriendActions = () => { return { type: ActionsGlobalComponents.HANDLE_ADD_FRIEND }; }; + +export const handleUserLanguagesActions = () => { + return { type: ActionsGlobalComponents.HANDLE_LANGUAGES_STATE }; +}; From 49dfe955c81fc0318d232fea3a00f478ee8b289b Mon Sep 17 00:00:00 2001 From: guicoelhodev Date: Mon, 2 Jan 2023 19:38:50 -0300 Subject: [PATCH 19/19] feat: add new case: handleLanguagesState --- src/reducers/globalComponentsReducer/reducer.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/reducers/globalComponentsReducer/reducer.ts b/src/reducers/globalComponentsReducer/reducer.ts index 9f84a02..fefe40d 100644 --- a/src/reducers/globalComponentsReducer/reducer.ts +++ b/src/reducers/globalComponentsReducer/reducer.ts @@ -15,7 +15,10 @@ export const globalComponentsReducer = ( case ActionsGlobalComponents.HANDLE_ADD_FRIEND: { return { ...state, addFriend: !state.addFriend }; } + case ActionsGlobalComponents.HANDLE_LANGUAGES_STATE: { + return { ...state, languages: !state.languages }; + } default: - state; + return state; } };