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", 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 045f012..dc5e910 100644 --- a/src/components/FC/ModalLanguages/index.tsx +++ b/src/components/FC/ModalLanguages/index.tsx @@ -1,17 +1,17 @@ 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 { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions'; 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 +38,22 @@ 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 ( - + + dispatchGlobalComponents(handleUserLanguagesActions()) + } + title="Favorite tools" + > = ({ setState }) => { { if (target.checked) diff --git a/src/components/UI/Layout/index.tsx b/src/components/UI/Layout/index.tsx index ffa6b92..47acd81 100644 --- a/src/components/UI/Layout/index.tsx +++ b/src/components/UI/Layout/index.tsx @@ -19,13 +19,14 @@ 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; + 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); @@ -61,7 +62,7 @@ export const Layout: React.FC = ({ children }) => { { title: 'Chat', icon: , - onClick: () => dispatchGlobalComponents(handleChatState()), + onClick: () => dispatchGlobalComponents(handleChatStateActions()), }, ]; @@ -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); 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}

-
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; + } +`; 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; + } + } +`; 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 && } 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}; + } +`; 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}; + } +`; 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; `; 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 ( {/* */} 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 && }     ); 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, } ); 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 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 ( - + ); }; 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 }; +}; 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; } }; 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"], 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"