Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.8 kB · 61 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import { 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 { Menu, MenuItem } from "components/Menu";import { useIsMobile } from "src/hooks/isMobile";import { LogoutSmall } from "components/Icons/LogoutSmall";import { mutate } from "swr";import { SpeedyLink } from "components/SpeedyLink";
export const ProfileButton = () => { let { identity } = useIdentityData(); let { data: record } = useRecordFromDid(identity?.atp_did); let isMobile = useIsMobile();
return ( <Menu asChild side={isMobile ? "top" : "right"} align={isMobile ? "center" : "start"} 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`} /> } > {record && ( <> <SpeedyLink className="no-underline!" href={`/p/${record.handle}`}> <MenuItem onSelect={() => {}}>View Profile</MenuItem> </SpeedyLink>
<hr className="border-border-light border-dashed" /> </> )} <MenuItem onSelect={async () => { await fetch("/api/auth/logout"); mutate("identity", null); }} > <LogoutSmall /> Log Out </MenuItem> </Menu> );};