const accountId = props.debugAccountId ?? context.accountId; // change this back to !accountId if (!accountId) { } const profile = Social.getr(`${accountId}/profile`); if (profile === null) { return ""; } const name = profile.name; const image = profile.image; return ( <div> <div> {accountId && !name && ( <div className="alert alert-warning rounded-4 mb-3"> <p>Your profile is missing a name.</p> {editProfileButton} </div> )} {accountId && !image.ipfs_cid && (!image.nft.contractId || !image.nft.tokenId) && !image.url && ( <div className="alert alert-warning rounded-4 mb-3"> <p>Your profile is missing a picture.</p> {editProfileButton} </div> )} </div> <> {/* This example requires updating your template: ``` <html class="h-full bg-white"> <body class="h-full"> ``` */} <div> {/* Static sidebar for desktop */} <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-gray-900 lg:pb-4"> <div className="flex h-16 shrink-0 items-center justify-center"> <img className="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" /> </div> <div className="mt-8"> <ul role="list" className="flex flex-col items-center space-y-1"> {navigation.map((item) => ( <li key={item.name}> <a href={item.href} className={classNames( item.current ? "bg-gray-800 text-white" : "text-gray-400 hover:text-white hover:bg-gray-800", "group flex gap-x-3 rounded-md p-3 text-sm leading-6 font-semibold" )} > <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" /> <span className="sr-only">{item.name}</span> </a> </li> ))} </ul> </div> </div> <div className="sticky top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden"> <button type="button" className="-m-2.5 p-2.5 text-gray-400 lg:hidden" onClick={() => setSidebarOpen(true)} > <span className="sr-only">Open sidebar</span> <Bars3Icon className="h-6 w-6" aria-hidden="true" /> </button> <div className="flex-1 text-sm font-semibold leading-6 text-white"> Dashboard </div> <a href="#"> <span className="sr-only">Your profile</span> <img className="h-8 w-8 rounded-full bg-gray-800" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /> </a> </div> <div className="lg:pl-20"> <div className="xl:pl-96"> <div className="px-4 py-10 sm:px-6 lg:px-8 lg:py-6"> {/* Main area */} </div> </div> </div> <div className="fixed inset-y-0 left-20 hidden w-96 overflow-y-auto border-r border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block"> {/* Secondary column (hidden on smaller screens) */} </div> </div> </> </div> );