import { cn } from "../design"; import Avatar from "../avatar" import type Nestri from "@nestri/sdk" import { MotionComponent } from "../react"; import { Dropdown, Modal } from '@qwik-ui/headless'; import { useLocation, useNavigate } from "@builder.io/qwik-city"; import { disablePageScroll, enablePageScroll } from '@fluejs/noscroll'; import { $, component$, type QRL, useOnDocument, useSignal } from "@builder.io/qwik"; type Props = { getUserProfile$: QRL<() => Promise> } export const HomeNavBar = component$(({ getUserProfile$ }: Props) => { const nav = useNavigate() const inviteEmail = useSignal(''); const location = useLocation().url const inviteName = useSignal(''); const isHolding = useSignal(false); const newTeamName = useSignal(''); const isNewTeam = useSignal(false); const hasScrolled = useSignal(false); const isNewMember = useSignal(false); const showInviteSuccess = useSignal(false); const userProfile = useSignal() 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 handleLogout = $(async() => { await nav(`/auth/logout`) }); const handleLogoutAnimationComplete = $(() => { if (isHolding.value) { console.log("fucking hell") // isDeleting.value = true; // Reset the holding state isHolding.value = false; handleLogout(); } }); useOnDocument("load", $(async () => { const currentProfile = await getUserProfile$() userProfile.value = currentProfile })) 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" />
Cancel

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" />
) })