Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
4.0 kB · 116 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117import { Avatar } from "components/Avatar";import { ActionButton } from "./ActionButton";import { useIdentityData } from "components/IdentityProvider";import { AccountSmall } from "components/Icons/AccountSmall";import { useRecordFromDid } from "src/utils/useRecordFromDid";import { useIsMobile } from "src/hooks/isMobile";import { LogoutSmall } from "components/Icons/LogoutSmall";import { mutate } from "swr";import { SpeedyLink } from "components/SpeedyLink";import { Popover } from "components/Popover";import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";import { Modal } from "components/Modal";import { UpgradeContent } from "app/lish/[did]/[publication]/UpgradeModal";import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";import { useState } from "react";
export const ProfileButton = () => { let { identity } = useIdentityData(); let { data: record } = useRecordFromDid(identity?.atp_did); let isMobile = useIsMobile(); let [state, setState] = useState<"menu" | "manage-subscription">("menu"); let isPro = useIsPro(); let canSeePro = useCanSeePro();
return ( <Popover asChild side={isMobile ? "top" : "right"} align={isMobile ? "center" : "start"} onOpenChange={() => setState("menu")} className="w-xs" trigger={ <ActionButton nav labelOnMobile={false} icon={ record ? ( <Avatar src={record.avatar} displayName={record.displayName || record.handle} /> ) : ( <AccountSmall /> ) } label={record ? record.displayName || record.handle : "Account"} className={`w-full`} /> } > {state === "manage-subscription" ? ( <ManageProSubscription backToMenu={() => setState("menu")} /> ) : ( <div className="flex flex-col gap-0.5"> {record && ( <> <SpeedyLink className="no-underline!" href={`/p/${record.handle}`} > <button type="button" className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline! w-full" > View Profile </button> </SpeedyLink>
<hr className="border-border-light border-dashed" /> </> )} {canSeePro && ( <> {!isPro ? ( <Modal trigger={ <div className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline! bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast"> Get Leaflet Pro <ArrowRightTiny /> </div> } > <UpgradeContent /> </Modal> ) : ( <button className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!" type="button" onClick={() => setState("manage-subscription")} > Manage Pro Subscription <ArrowRightTiny /> </button> )}
<hr className="border-border-light border-dashed" /> </> )}
<button type="button" className="menuItem -mx-[8px] text-left flex items-center gap-2 hover:no-underline!" onClick={async () => { await fetch("/api/auth/logout"); mutate("identity", null); }} > <LogoutSmall /> Log Out </button> </div> )} </Popover> );};