diff --git a/packages/web/components/LoginButton.tsx b/packages/web/components/LoginButton.tsx index 2e00fd1e..c2cfd46a 100644 --- a/packages/web/components/LoginButton.tsx +++ b/packages/web/components/LoginButton.tsx @@ -12,12 +12,13 @@ import { MetaLink } from 'components/Link'; import { Web3Context } from 'contexts/Web3Context'; import React, { useCallback, useContext } from 'react'; -import { useUser } from '../lib/hooks'; +import { useUser, useWeb3 } from '../lib/hooks'; import { getPlayerImage, getPlayerName } from '../utils/playerHelpers'; export const LoginButton: React.FC = () => { const { connectWeb3, disconnect, isConnected } = useContext(Web3Context); + const { address } = useWeb3(); const { user, fetching } = useUser(); const handleLoginClick = useCallback(async () => { @@ -29,6 +30,9 @@ export const LoginButton: React.FC = () => { return ; } if (!user?.player) return null; + + const hasEditedProfile = user.username && user.username !== address; + return ( { {user.player ? getPlayerName(user.player) : 'Unknown'} - + diff --git a/packages/web/components/Setup/SetupAvailability.tsx b/packages/web/components/Setup/SetupAvailability.tsx index 0b3f1001..1fbd20b9 100644 --- a/packages/web/components/Setup/SetupAvailability.tsx +++ b/packages/web/components/Setup/SetupAvailability.tsx @@ -14,13 +14,19 @@ import { useUpdateProfileMutation } from 'graphql/autogen/types'; import { useUser } from 'lib/hooks'; import React, { useEffect, useState } from 'react'; -export const SetupAvailability: React.FC = () => { +export type SetupAvailabilityProps = { + availability: string; + setAvailability: React.Dispatch>; +} + +export const SetupAvailability: React.FC = ({ + availability, setAvailability +}) => { const { onNextPress, - nextButtonLabel, - availability, - setAvailability, + nextButtonLabel } = useSetupFlow(); + const [invalid, setInvalid] = useState(false); const { user } = useUser({ redirectTo: '/' }); const toast = useToast(); diff --git a/packages/web/components/Setup/SetupMemberships.tsx b/packages/web/components/Setup/SetupMemberships.tsx index 1b74d485..ca447753 100644 --- a/packages/web/components/Setup/SetupMemberships.tsx +++ b/packages/web/components/Setup/SetupMemberships.tsx @@ -8,24 +8,25 @@ import { } from '@metafam/ds'; import { FlexContainer } from 'components/Container'; import { useSetupFlow } from 'contexts/SetupContext'; -import { getMemberships } from 'graphql/getMemberships'; -import React, { useEffect } from 'react'; +import { Membership } from 'graphql/types'; +import React from 'react'; import { useWeb3 } from '../../lib/hooks'; -export const SetupMemberships: React.FC = () => { - const { address, isConnected } = useWeb3(); +export type SetupMembershipsProps = { + memberships: Array | null | undefined; + setMemberships: React.Dispatch< + React.SetStateAction | null | undefined> + >; +} + +export const SetupMemberships: React.FC = ({memberships}) => { + const { isConnected } = useWeb3(); const { onNextPress, - nextButtonLabel, - memberships, - setMemberships, + nextButtonLabel } = useSetupFlow(); - useEffect(() => { - getMemberships(address).then((data) => { - setMemberships(data); - }); - }, [address, setMemberships]); + return ( diff --git a/packages/web/components/Setup/SetupPersonalityType.tsx b/packages/web/components/Setup/SetupPersonalityType.tsx index 33610be5..da4f7c65 100644 --- a/packages/web/components/Setup/SetupPersonalityType.tsx +++ b/packages/web/components/Setup/SetupPersonalityType.tsx @@ -15,13 +15,20 @@ import { PersonalityType } from 'graphql/types'; import { useUser } from 'lib/hooks'; import React from 'react'; -export const SetupPersonalityType: React.FC = () => { +export type SetupPersonalityTypeProps = { + personalityTypeChoices: Array; + personalityType: PersonalityType | undefined; + setPersonalityType: React.Dispatch< + React.SetStateAction + >; +} + +export const SetupPersonalityType: React.FC = ({ + personalityTypeChoices, personalityType, setPersonalityType +}) => { const { onNextPress, nextButtonLabel, - personalityTypes, - personalityType, - setPersonalityType, } = useSetupFlow(); const { user } = useUser({ redirectTo: '/' }); const toast = useToast(); @@ -65,7 +72,7 @@ export const SetupPersonalityType: React.FC = () => { - {personalityTypes.map((p: PersonalityType) => ( + {personalityTypeChoices.map((p: PersonalityType) => ( { +export type SetupPlayerTypeProps = { + playerTypeChoices: Array; + playerType: Player_Type | undefined; + setPlayerType: React.Dispatch>; +} + +export const SetupPlayerType: React.FC = ({ + playerTypeChoices, playerType, setPlayerType +}) => { const { onNextPress, - nextButtonLabel, - playerTypes, - playerType, - setPlayerType + nextButtonLabel } = useSetupFlow(); const { user } = useUser({ redirectTo: '/' }); const toast = useToast(); @@ -59,7 +64,7 @@ export const SetupPlayerType: React.FC = () => { that suits you best. - {playerTypes.map((p) => ( + {playerTypeChoices.map((p) => ( { +export const SetupProfile: React.FC = ({children}) => { const { step, - screen, - numTotalSteps, - options, - username, - setUsername, - personalityType, - setPersonalityType, - playerType, - setPlayerType, - availability, - setAvailability, - timeZone, - setTimeZone, - skills, - setSkills, + numTotalSteps } = useSetupFlow(); - const { user } = useUser({ redirectTo: '/' }); - const { address } = useWeb3(); - useEffect(() => { - if (user?.player) { - const {player} = user; - if ( - player.username && - player.username.toLowerCase() !== address?.toLowerCase() && - !username - ) { - setUsername(player.username); - } - if (player.availability_hours && !availability) { - setAvailability(player.availability_hours.toString()); - } - if (player.EnneagramType && !personalityType) { - setPersonalityType(PersonalityTypes[player.EnneagramType.name]); - } - if (player.playerType && !playerType) { - setPlayerType(player.playerType); - } - if ( - player.Player_Skills && - player.Player_Skills.length > 0 && - skills.length === 0 - ) { - setSkills( - player.Player_Skills.map((s) => ({ - value: s.Skill.id, - label: s.Skill.name, - ...s.Skill, - })), - ); - } - if (player.timezone && !timeZone) { - setTimeZone(player.timezone); - } - } - }, [ - user, - address, - username, - setUsername, - personalityType, - setPersonalityType, - playerType, - setPlayerType, - availability, - setAvailability, - timeZone, - setTimeZone, - skills, - setSkills, - ]); return ( {(step + 1) % numTotalSteps !== 0 && } - {options[step].screens[screen].component} + {children} ); diff --git a/packages/web/components/Setup/SetupSkills.tsx b/packages/web/components/Setup/SetupSkills.tsx index 5dede6f8..621d1d30 100644 --- a/packages/web/components/Setup/SetupSkills.tsx +++ b/packages/web/components/Setup/SetupSkills.tsx @@ -12,13 +12,20 @@ import { SkillCategory_Enum, useUpdatePlayerSkillsMutation } from 'graphql/autog import { SkillColors } from 'graphql/types'; import { useUser } from 'lib/hooks'; import React from 'react'; -import { SkillOption } from 'utils/skillHelpers'; +import { CategoryOption, SkillOption } from 'utils/skillHelpers'; -export const SetupSkills: React.FC = () => { +export type SetupSkillsProps = { + skillChoices: Array; + skills: Array; + setSkills: React.Dispatch< + React.SetStateAction> + >; +} + +export const SetupSkills: React.FC = ({ + skillChoices, skills, setSkills, +}) => { const { - skillsList, - skills, - setSkills, onNextPress, nextButtonLabel, } = useSetupFlow(); @@ -47,7 +54,6 @@ export const SetupSkills: React.FC = () => { onNextPress(); }; - const styles: typeof selectStyles = { ...selectStyles, multiValue: (s, { data }) => ({ @@ -81,7 +87,7 @@ export const SetupSkills: React.FC = () => { styles={styles} value={skills} onChange={(value) => setSkills(value as Array)} - options={skillsList} + options={skillChoices} autoFocus closeMenuOnSelect={false} placeholder="ADD YOUR SKILLS" diff --git a/packages/web/components/Setup/SetupTimeZone.tsx b/packages/web/components/Setup/SetupTimeZone.tsx index 335aca5d..5d690108 100644 --- a/packages/web/components/Setup/SetupTimeZone.tsx +++ b/packages/web/components/Setup/SetupTimeZone.tsx @@ -10,12 +10,15 @@ import { useUpdateProfileMutation } from 'graphql/autogen/types'; import { useUser } from 'lib/hooks'; import React from 'react'; -export const SetupTimeZone: React.FC = () => { +export type SetupTimezoneProps = { + timeZone: string; + setTimeZone: React.Dispatch>; +} + +export const SetupTimeZone: React.FC = ({timeZone, setTimeZone}) => { const { onNextPress, - nextButtonLabel, - timeZone, - setTimeZone + nextButtonLabel } = useSetupFlow(); const { user } = useUser({ redirectTo: '/' }); const toast = useToast(); diff --git a/packages/web/components/Setup/SetupUsername.tsx b/packages/web/components/Setup/SetupUsername.tsx index 885b790f..5a05d8fb 100644 --- a/packages/web/components/Setup/SetupUsername.tsx +++ b/packages/web/components/Setup/SetupUsername.tsx @@ -7,12 +7,15 @@ import React, { useEffect, useState } from 'react'; const USERNAME_REGEX = /^[a-zA-Z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-zA-Z0-9]){2,18}[a-zA-Z0-9]$/; -export const SetupUsername: React.FC = () => { +export type SetupUsernameProps = { + username: string; + setUsername: React.Dispatch>; +} + +export const SetupUsername: React.FC = ({username, setUsername}) => { const { onNextPress, - nextButtonLabel, - username, - setUsername, + nextButtonLabel } = useSetupFlow(); const [invalid, setInvalid] = useState(false); const { user } = useUser({ redirectTo: '/' }); diff --git a/packages/web/contexts/SetupContext.tsx b/packages/web/contexts/SetupContext.tsx index 90316854..168b895b 100644 --- a/packages/web/contexts/SetupContext.tsx +++ b/packages/web/contexts/SetupContext.tsx @@ -1,8 +1,5 @@ -import { Player_Type } from 'graphql/autogen/types'; -import { Membership, PersonalityType } from 'graphql/types'; import { useRouter } from 'next/router'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { CategoryOption, SkillOption } from 'utils/skillHelpers'; type SetupOption = { label: string; @@ -11,7 +8,8 @@ type SetupOption = { }; screens: Array<{ label: string; - component: React.ReactNode; + component?: React.ReactNode; + slug?: string; }>; }; @@ -23,27 +21,6 @@ type SetupContextType = { onBackPress: () => void; nextButtonLabel: string; numTotalSteps: number; - skillsList: Array; - personalityTypes: Array; - playerTypes: Array; - username: string; - setUsername: React.Dispatch>; - skills: Array; - setSkills: React.Dispatch>>; - personalityType: PersonalityType | undefined; - setPersonalityType: React.Dispatch< - React.SetStateAction - >; - playerType: Player_Type | undefined; - setPlayerType: React.Dispatch>; - availability: string; - setAvailability: React.Dispatch>; - timeZone: string; - setTimeZone: React.Dispatch>; - memberships: Array | null | undefined; - setMemberships: React.Dispatch< - React.SetStateAction | null | undefined> - >; }; export const SetupContext = React.createContext({ @@ -54,38 +31,15 @@ export const SetupContext = React.createContext({ onBackPress: () => undefined, nextButtonLabel: 'Next Step', numTotalSteps: 0, - skillsList: [], - personalityTypes: [], - playerTypes: [], - username: '', - setUsername: () => undefined, - skills: [], - setSkills: () => undefined, - personalityType: undefined, - setPersonalityType: () => undefined, - playerType: undefined, - setPlayerType: () => undefined, - availability: '', - setAvailability: () => undefined, - timeZone: '', - setTimeZone: () => undefined, - memberships: undefined, - setMemberships: () => undefined, }); type Props = { options: Array; - skillsList: Array; - personalityTypes: Array; - playerTypes: Array; }; export const SetupContextProvider: React.FC = ({ children, - options, - skillsList, - personalityTypes, - playerTypes, + options }) => { const router = useRouter(); const [step, setStep] = useState(0); @@ -116,7 +70,8 @@ export const SetupContextProvider: React.FC = ({ } else { setScreen((screen + 1) % numScreens); } - }, [options, step, screen, setStep, setScreen, numTotalSteps]); + router.push(`/profile/setup/${options[step].screens[(screen + 1) % numScreens].slug}`); + }, [router, options, step, screen, setStep, setScreen, numTotalSteps]); const onBackPress = useCallback(() => { if (step <= 0 && screen <= 0) { @@ -132,16 +87,6 @@ export const SetupContextProvider: React.FC = ({ } }, [router, options, step, screen, setStep, setScreen, numTotalSteps]); - const [username, setUsername] = useState(''); - const [skills, setSkills] = useState>([]); - const [personalityType, setPersonalityType] = useState(); - const [playerType, setPlayerType] = useState(); - const [availability, setAvailability] = useState(''); - const [timeZone, setTimeZone] = useState(''); - const [memberships, setMemberships] = useState< - Array | null | undefined - >(); - return ( = ({ onNextPress, onBackPress, nextButtonLabel, - // data - skillsList, - personalityTypes, - playerTypes, - // username - username, - setUsername, - // skills - skills, - setSkills, - // personalityType - personalityType, - setPersonalityType, - // playerType - playerType, - setPlayerType, - // availability - availability, - setAvailability, - // time zone - timeZone, - setTimeZone, - // memberships - memberships, - setMemberships, }} > {children} diff --git a/packages/web/pages/profile/setup.tsx b/packages/web/pages/profile/setup.tsx deleted file mode 100644 index e4592879..00000000 --- a/packages/web/pages/profile/setup.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { SetupProfile } from 'components/Setup/SetupProfile'; -import { SetupContextProvider } from 'contexts/SetupContext'; -import { getPersonalityTypes } from 'graphql/getPersonalityTypes'; -import { getPlayerTypes } from 'graphql/getPlayerTypes'; -import { getSkills } from 'graphql/getSkills'; -import { InferGetStaticPropsType } from 'next'; -import React from 'react'; -import { options as setupOptions } from 'utils/setupOptions'; -import { parseSkills } from 'utils/skillHelpers'; - -export const getStaticProps = async () => { - const [skills, personalityTypes, playerTypes] = await Promise.all([ - getSkills(), - getPersonalityTypes(), - getPlayerTypes(), - ]); - const skillsList = parseSkills(skills); - - return { - props: { - skillsList, - personalityTypes, - playerTypes, - hideAppDrawer: true, - }, - }; -}; - -type Props = InferGetStaticPropsType; - -const ProfileSetup: React.FC = (props) => ( - - - -); - -export default ProfileSetup; diff --git a/packages/web/pages/profile/setup/availability.tsx b/packages/web/pages/profile/setup/availability.tsx new file mode 100644 index 00000000..62c061bc --- /dev/null +++ b/packages/web/pages/profile/setup/availability.tsx @@ -0,0 +1,28 @@ +import { SetupAvailability } from 'components/Setup/SetupAvailability'; +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { useUser } from 'lib/hooks'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +const AvailabilitySetup: React.FC = () => { + + const [availability, setAvailability] = useState(''); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if (player.availability_hours && !availability) { + setAvailability(player.availability_hours.toString()); + } + } + + return ( + + + + + + ); +}; +export default AvailabilitySetup; diff --git a/packages/web/pages/profile/setup/memberships.tsx b/packages/web/pages/profile/setup/memberships.tsx new file mode 100644 index 00000000..2a26b419 --- /dev/null +++ b/packages/web/pages/profile/setup/memberships.tsx @@ -0,0 +1,29 @@ +import { SetupMemberships } from 'components/Setup/SetupMemberships'; +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { getMemberships } from 'graphql/getMemberships'; +import { Membership } from 'graphql/types'; +import { useWeb3 } from 'lib/hooks'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +const MembershipsSetup: React.FC = () => { + + const [memberships, setMemberships] = useState< + Array | null | undefined + >(); + + const { address } = useWeb3(); + getMemberships(address).then((data) => { + setMemberships(data); + }); + + return ( + + + + + + ); +}; +export default MembershipsSetup; diff --git a/packages/web/pages/profile/setup/personalityType.tsx b/packages/web/pages/profile/setup/personalityType.tsx new file mode 100644 index 00000000..d554a16c --- /dev/null +++ b/packages/web/pages/profile/setup/personalityType.tsx @@ -0,0 +1,47 @@ +import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType'; +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { getPersonalityTypes } from 'graphql/getPersonalityTypes'; +import { PersonalityType, PersonalityTypes } from 'graphql/types'; +import { useUser } from 'lib/hooks'; +import { InferGetStaticPropsType } from 'next'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +export const getStaticProps = async () => { + const personalityTypeChoices = await getPersonalityTypes(); + + return { + props: { + personalityTypeChoices + } + }; +}; + +type Props = InferGetStaticPropsType; + +const PersonalityTypeSetup: React.FC = (props) => { + + const {personalityTypeChoices} = props; + const [personalityType, setPersonalityType] = useState(); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if (player.EnneagramType && !personalityType) { + setPersonalityType(PersonalityTypes[player.EnneagramType.name]); + } + } + + return ( + + + + + + ); +}; +export default PersonalityTypeSetup; diff --git a/packages/web/pages/profile/setup/playerType.tsx b/packages/web/pages/profile/setup/playerType.tsx new file mode 100644 index 00000000..b211e007 --- /dev/null +++ b/packages/web/pages/profile/setup/playerType.tsx @@ -0,0 +1,47 @@ +import { SetupPlayerType } from 'components/Setup/SetupPlayerType'; +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { Player_Type } from 'graphql/autogen/types'; +import { getPlayerTypes } from 'graphql/getPlayerTypes'; +import { useUser } from 'lib/hooks'; +import { InferGetStaticPropsType } from 'next'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +export const getStaticProps = async () => { + const playerTypeChoices = await getPlayerTypes(); + + return { + props: { + hideAppDrawer: true, + playerTypeChoices + } + }; +}; + +type Props = InferGetStaticPropsType; + +const PlayerTypeSetup: React.FC = (props) => { + const {playerTypeChoices} = props; + const [playerType, setPlayerType] = useState(); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if (player.playerType && !playerType) { + setPlayerType(player.playerType); + } + } + + return ( + + + + + + ); +}; +export default PlayerTypeSetup; diff --git a/packages/web/pages/profile/setup/skills.tsx b/packages/web/pages/profile/setup/skills.tsx new file mode 100644 index 00000000..25e227db --- /dev/null +++ b/packages/web/pages/profile/setup/skills.tsx @@ -0,0 +1,57 @@ +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupSkills } from 'components/Setup/SetupSkills'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { getSkills } from 'graphql/getSkills'; +import { useUser } from 'lib/hooks'; +import { InferGetStaticPropsType } from 'next'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; +import { parseSkills, SkillOption } from 'utils/skillHelpers'; + +export const getStaticProps = async () => { + const skills = await getSkills(); + const skillChoices = parseSkills(skills); + + return { + props: { + skillChoices + }, + }; +}; + +type Props = InferGetStaticPropsType; + +const SkillsSetup: React.FC = (props) => { + const {skillChoices} = props; + const [skills, setSkills] = useState>([]); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if ( + player.Player_Skills && + player.Player_Skills.length > 0 && + skills.length === 0 + ) { + setSkills( + player.Player_Skills.map((s) => ({ + value: s.Skill.id, + label: s.Skill.name, + ...s.Skill, + })), + ); + } + } + + return ( + + + + + + ); +}; +export default SkillsSetup; diff --git a/packages/web/pages/profile/setup/timeZone.tsx b/packages/web/pages/profile/setup/timeZone.tsx new file mode 100644 index 00000000..2bb096b8 --- /dev/null +++ b/packages/web/pages/profile/setup/timeZone.tsx @@ -0,0 +1,28 @@ +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupTimeZone } from 'components/Setup/SetupTimeZone'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { useUser } from 'lib/hooks'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +const TimeZoneSetup: React.FC = () => { + + const [timeZone, setTimeZone] = useState(''); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if (player.timezone && !timeZone) { + setTimeZone(player.timezone); + } + } + + return ( + + + + + + ); +}; +export default TimeZoneSetup; diff --git a/packages/web/pages/profile/setup/username.tsx b/packages/web/pages/profile/setup/username.tsx new file mode 100644 index 00000000..74207078 --- /dev/null +++ b/packages/web/pages/profile/setup/username.tsx @@ -0,0 +1,33 @@ +import { SetupProfile } from 'components/Setup/SetupProfile'; +import { SetupUsername } from 'components/Setup/SetupUsername'; +import { SetupContextProvider } from 'contexts/SetupContext'; +import { useUser, useWeb3 } from 'lib/hooks'; +import React, { useState } from 'react'; +import { options as setupOptions } from 'utils/setupOptions'; + +const UsernameSetup: React.FC = () => { + + const [username, setUsername] = useState(''); + const { address } = useWeb3(); + const { user } = useUser({ redirectTo: '/' }); + + if (user?.player) { + const {player} = user; + if ( + player.username && + player.username.toLowerCase() !== address?.toLowerCase() && + !username + ) { + setUsername(player.username); + } + } + + return ( + + + + + + ); +}; +export default UsernameSetup; diff --git a/packages/web/utils/setupOptions.tsx b/packages/web/utils/setupOptions.tsx index d77198f5..3536228e 100644 --- a/packages/web/utils/setupOptions.tsx +++ b/packages/web/utils/setupOptions.tsx @@ -1,11 +1,4 @@ -import { SetupAvailability } from 'components/Setup/SetupAvailability'; import { SetupDone } from 'components/Setup/SetupDone'; -import { SetupMemberships } from 'components/Setup/SetupMemberships'; -import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType'; -import { SetupPlayerType } from 'components/Setup/SetupPlayerType'; -import { SetupSkills } from 'components/Setup/SetupSkills'; -import { SetupTimeZone } from 'components/Setup/SetupTimeZone'; -import { SetupUsername } from 'components/Setup/SetupUsername'; import React from 'react'; export const options = [ @@ -15,41 +8,41 @@ export const options = [ screens: [ { label: 'Username', - component: , + slug: 'username' }, { label: 'Personality Type', - component: , + slug: 'personalityType' }, { label: 'Player Type', - component: , + slug: 'playerType', }, ], }, { - label: 'Portfolio', + label: 'Profile', title: { - base: 'Portfolio', - sm: '2. Portfolio', + base: 'Profile', + sm: '2. Profile', lg: '2. Professional Profile', }, screens: [ { label: 'Skills', - component: , + slug: 'skills' }, { label: 'Availability', - component: , + slug: 'availability', }, { label: 'Time Zone', - component: + slug: 'timeZone' }, { label: 'Memberships', - component: , + slug: 'memberships', }, ], },