diff --git a/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx new file mode 100644 index 0000000..16e58eb --- /dev/null +++ b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx @@ -0,0 +1,81 @@ +import { motion } from 'framer-motion' +import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer' +import { FiGithub, FiLinkedin, FiTwitter } from "react-icons/fi"; +import { IoClose } from 'react-icons/io5'; +import { GetMakersInTournamentQuery } from 'src/graphql'; +import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; +import { withHttp } from 'src/utils/helperFunctions'; + + +interface Props extends ModalCard { + maker: GetMakersInTournamentQuery['getMakersInTournament']['makers'][number] +} + +export default function LinkingAccountModal({ onClose, direction, maker, ...props }: Props) { + + + const links = [ + { + hasValue: maker.twitter, + text: maker.twitter, + icon: FiTwitter, + colors: "bg-blue-100 text-blue-500", + url: `https://twitter.com/@${maker.twitter}` + }, + { + hasValue: maker.github, + text: maker.github, + icon: FiGithub, + colors: "bg-pink-100 text-pink-600", + url: `https://github.com/${maker.github}` + }, + { + hasValue: maker.linkedin, + text: "LinkedIn", + icon: FiLinkedin, + colors: "bg-sky-100 text-cyan-600", + url: maker.linkedin && withHttp(maker.linkedin), + } + ]; + + + return ( + +
+ +

Send team request 🤝

+
+
+
+ +
+

{maker.name}

+

{maker.jobTitle}

+
+ +

Team up with this maker by sending them a message on one of the following platforms.

+
+ {links.filter(link => link.hasValue).map((link, idx) => + + + )} +
+
+
+ ) +} + + + diff --git a/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/index.ts b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/index.ts new file mode 100644 index 0000000..1da3ce6 --- /dev/null +++ b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/index.ts @@ -0,0 +1,3 @@ +import { lazyModal } from 'src/utils/helperFunctions'; + +export const { LazyComponent: ConnectToMakerModal } = lazyModal(() => import('./ConnectToMakerModal')) \ No newline at end of file diff --git a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx index 1fe99c2..5fce987 100644 --- a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx +++ b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx @@ -5,6 +5,7 @@ import Card from 'src/Components/Card/Card'; import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; import Badge from 'src/Components/Badge/Badge'; import { createRoute } from 'src/utils/routing'; +import { openModal } from "src/redux/features/modals.slice"; type MakerType = GetMakersInTournamentQuery['getMakersInTournament']['makers'][number] @@ -15,7 +16,12 @@ interface Props { export default function MakerCard({ maker, isMe }: Props) { - const dispatch = useAppDispatch() + const dispatch = useAppDispatch(); + + let actionBtn = + + if (isMe) actionBtn = ; + else actionBtn = return ( @@ -36,7 +42,7 @@ export default function MakerCard({ maker, isMe }: Props) {

No roles added

} - {isMe && } + {actionBtn}
@@ -60,6 +66,7 @@ export default function MakerCard({ maker, isMe }: Props) {

No skills added

} - {isMe && } +
{actionBtn}
+ ) } diff --git a/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql b/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql index 0a8856c..f1ebe98 100644 --- a/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql +++ b/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql @@ -37,6 +37,10 @@ query GetMakersInTournament( name avatar jobTitle + email + twitter + linkedin + github roles { id icon diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx index c5dc674..4ae1dba 100644 --- a/src/graphql/index.tsx +++ b/src/graphql/index.tsx @@ -844,7 +844,7 @@ export type GetMakersInTournamentQueryVariables = Exact<{ }>; -export type GetMakersInTournamentQuery = { __typename?: 'Query', getMakersInTournament: { __typename?: 'TournamentMakersResponse', hasNext: boolean | null, hasPrev: boolean | null, makers: Array<{ __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null, roles: Array<{ __typename?: 'MakerRole', id: number, icon: string, title: string }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> }> } }; +export type GetMakersInTournamentQuery = { __typename?: 'Query', getMakersInTournament: { __typename?: 'TournamentMakersResponse', hasNext: boolean | null, hasPrev: boolean | null, makers: Array<{ __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null, email: string | null, twitter: string | null, linkedin: string | null, github: string | null, roles: Array<{ __typename?: 'MakerRole', id: number, icon: string, title: string }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> }> } }; export type GetProjectsInTournamentQueryVariables = Exact<{ tournamentId: Scalars['Int']; @@ -2277,6 +2277,10 @@ export const GetMakersInTournamentDocument = gql` name avatar jobTitle + email + twitter + linkedin + github roles { id icon diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts index 42193ae..98b413f 100644 --- a/src/redux/features/modals.slice.ts +++ b/src/redux/features/modals.slice.ts @@ -14,6 +14,9 @@ import { EventModal } from "src/features/Tournaments/pages/EventsPage/EventModal import { ComponentProps } from "react"; import { generateId } from "src/utils/helperFunctions"; import { NoWeblnModal } from "src/Components/Modals/NoWeblnModal"; +import { ConnectToMakerModal } from "src/features/Tournaments/pages/MakersPage/ConnectToMakerModal"; + + export enum Direction { START, @@ -39,7 +42,8 @@ export const ALL_MODALS = { Claim_FundWithdrawCard, // Tournaments - EventModal: EventModal, + EventModal, + ConnectToMakerModal, // Misc ConfirmModal,