a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useIdentityData } from "./IdentityProvider";
3import { Popover } from "./Popover";
4import LoginForm from "app/login/LoginForm";
5import { ButtonPrimary } from "./Buttons";
6import { ActionButton } from "./ActionBar/ActionButton";
7import { AccountSmall } from "./Icons/AccountSmall";
8import { useIsMobile } from "src/hooks/isMobile";
9
10export function LoginButton() {
11 let identityData = useIdentityData();
12 if (identityData.identity) return null;
13 return (
14 <Popover
15 asChild
16 trigger={
17 <ButtonPrimary className="place-self-start text-sm">
18 Log In!
19 </ButtonPrimary>
20 }
21 >
22 <LoginForm text="Save your Leaflets and access them on multiple devices!" />
23 </Popover>
24 );
25}
26
27export function LoginActionButton() {
28 let identityData = useIdentityData();
29 if (identityData.identity) return null;
30 let isMobile = useIsMobile();
31 return (
32 <Popover
33 asChild
34 side={isMobile ? "top" : "right"}
35 align={isMobile ? "center" : "start"}
36 trigger={
37 <ActionButton secondary icon={<AccountSmall />} label="Sign In" />
38 }
39 >
40 <LoginForm text="Save your Leaflets and access them on multiple devices!" />
41 </Popover>
42 );
43}