import { cn } from "./design"; import Avatar from "./avatar" import { MotionComponent } from "./react"; import { Dropdown, Modal } from '@qwik-ui/headless'; import { disablePageScroll, enablePageScroll } from '@fluejs/noscroll'; import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik"; type Props = { avatarUrl?: string; discriminator: string | number; username: string; } export const HomeNavBar = component$(({ avatarUrl, username, discriminator }: Props) => { const hasScrolled = useSignal(false); const defaultTeam = `${username}'s Games` const selectedTeam = useSignal(defaultTeam) const isNewTeam = useSignal(false); const isNewMember = useSignal(false); const isHolding = useSignal(false); const showInviteSuccess = useSignal(false); const newTeamName = useSignal(''); const inviteName = useSignal(''); const inviteEmail = useSignal(''); const teams = useSignal([ { name: defaultTeam } ]); const onDialogOpen = $((open: boolean) => { if (open) { disablePageScroll() } else { enablePageScroll() } }) const handlePointerDown = $(() => { isHolding.value = true }); const handlePointerUp = $(() => { isHolding.value = false }); const handleAddTeam = $((e: any) => { e.preventDefault(); if (newTeamName.value.trim()) { teams.value = [...teams.value, { name: newTeamName.value.trim() }]; // selectedTeam.value = newTeamName.value.trim() newTeamName.value = ''; isNewTeam.value = false; } }); const handleInvite = $((e: any) => { e.preventDefault(); if (inviteName.value && inviteEmail.value) { // Here you would typically make an API call to send the invitation console.log('Sending invite to:', { name: inviteName.value, email: inviteEmail.value }); inviteName.value = ''; inviteEmail.value = ''; isNewMember.value = false; showInviteSuccess.value = true; setTimeout(() => { showInviteSuccess.value = false; }, 3000); } }); useOnDocument( 'scroll', $(() => { hasScrolled.value = window.scrollY > 0; }) ); const handleDeleteTeam = $(() => { // Only delete if it's not the default team if (selectedTeam.value !== defaultTeam) { teams.value = teams.value.filter(team => team.name !== selectedTeam.value); selectedTeam.value = defaultTeam; } }); const handleDeleteAnimationComplete = $(() => { if (isHolding.value) { // isDeleting.value = true; // Reset the holding state isHolding.value = false; handleDeleteTeam(); } }); return ( <>

Create a team

Continue to start playing with on Pro with increased usage, additional security features, and support
newTeamName.value = e.target!.value} required value={newTeamName.value} id="name" type="text" placeholder="Enter team name" class="[transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] w-full bg-transparent px-2 py-3 h-10 border text-black dark:text-white dark:border-gray-700/70 border-gray-300/70 rounded-md text-sm outline-none leading-none focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-2" />

Send an invite

Friends will receive an email allowing them to join this team
inviteName.value = e.target!.value} id="name" type="text" placeholder="Jane Doe" class="[transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] w-full bg-transparent px-2 py-3 h-10 border text-black dark:text-white dark:border-gray-700/70 border-gray-300/70 rounded-md text-sm outline-none leading-none focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-2" />
inviteEmail.value = e.target!.value} id="email" type="email" placeholder="jane@doe.com" class="[transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] w-full px-2 bg-transparent py-3 h-10 border text-black dark:text-white dark:border-gray-700/70 border-gray-300/70 rounded-md text-sm outline-none leading-none focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-2" />
) })