feat: connect with maker modal

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 (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[442px] rounded-xl relative"
+        >
+            <div className="p-24">
+                <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+                <h2 className='text-h5 font-bold text-center'>Send team request 🤝</h2>
+            </div>
+            <hr className="bg-gray-200" />
+            <div className='flex flex-col justify-center gap-24 items-center text-center p-24'>
+                <Avatar src={maker.avatar} width={80} />
+                <div className="flex flex-col gap-4">
+                    <p className="text-body3 text-gray-900">{maker.name}</p>
+                    <p className="text-body4 text-gray-600">{maker.jobTitle}</p>
+                </div>
+
+                <p className="text-gray-600">Team up with this maker by sending them a message on one of the following platforms.</p>
+                <div className="flex gap-24 justify-center">
+                    {links.filter(link => link.hasValue).map((link, idx) =>
+                        <a
+                            key={idx}
+                            href={link.url!}
+                            className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                            target='_blank'
+                            rel="noreferrer">
+                            <link.icon className="scale-125" />
+                        </a>)}
+                </div>
+            </div>
+        </motion.div>
+    )
+}
+
+
+

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'))

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 = <Button fullWidth color='white' disabled size='sm' className='ml-auto'>Hacking solo</Button>
+
+    if (isMe) actionBtn = <Button fullWidth color='white' href={createRoute({ type: 'edit-profile' })} size='sm' className='ml-auto'>Edit Profile</Button>;
+    else actionBtn = <Button fullWidth color='white' size='sm' className='ml-auto' onClick={() => dispatch(openModal({ Modal: "ConnectToMakerModal", props: { maker } }))}>🤝 Team Up</Button>
 
 
     return (
@@ -36,7 +42,7 @@ export default function MakerCard({ maker, isMe }: Props) {
                         <p className="hidden md:block text-body4 text-gray-400">No roles added</p>
                     }
                 </div>
-                {isMe && <span className="ml-auto hidden md:inline-block"><Button color='white' href={createRoute({ type: 'edit-profile' })} size='sm' className='ml-auto'>Edit Profile</Button></span>}
+                <span className="ml-auto hidden md:inline-block">{actionBtn}</span>
             </div>
             <hr className="hidden md:block bg-gray-200 mt-24"></hr>
 
@@ -60,6 +66,7 @@ export default function MakerCard({ maker, isMe }: Props) {
                     <p className="text-body4 text-gray-400">No skills added</p>
                 }
             </div>
-            {isMe && <Button fullWidth color='white' href={createRoute({ type: 'edit-profile' })} size='sm' className='mt-32 md:hidden'>Edit Profile</Button>}        </Card>
+            <div className="md:hidden w-full mt-24">{actionBtn}</div>
+        </Card>
     )
 }

src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql

@@ -37,6 +37,10 @@ query GetMakersInTournament(
       name
       avatar
       jobTitle
+      email
+      twitter
+      linkedin
+      github
       roles {
         id
         icon

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

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,