Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
6.1 kB · 191 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192"use client";import { ButtonPrimary } from "components/Buttons";import { BlueskyTiny } from "components/Icons/BlueskyTiny";import { Popover } from "components/Popover";import Link from "next/link";import { HandleInput } from "./HandleInput";const logos = { Anisota: "/logos/anisota.svg", Blacksky: "/logos/blacksky.svg", Blento: "/logos/blento.svg", Bluesky: "/logos/bluesky.svg", Cartridge: "/logos/cartridge.svg", Eurosky: "/logos/eurosky.svg", Graze: "/logos/graze.svg", Leaflet: "/logos/leaflet.svg", Margin: "/logos/margin.svg", Offprint: "/logos/offprint.svg", Pckt: "/logos/pckt.svg", pdsls: "/logos/pdsls.svg", "plyr.fm": "/logos/plyr.fm.svg", Popfeed: "/logos/popfeed.svg", Roomy: "/logos/roomy.svg", Semble: "/logos/semble.svg", Sill: "/logos/sill.svg", Spark: "/logos/spark.svg", Surf: "/logos/surf.svg", Tangled: "/logos/tangled.svg",};
import { Separator } from "components/Layout";
export const SubscribeWithHandle = (props: { autoFocus?: boolean; user: { loggedIn: boolean; email: string | undefined; handle: string | undefined; };}) => { if (props.user.loggedIn && props.user.handle) { return ( <ButtonPrimary className="mx-auto max-w-full"> <span className="shrink-0">Subscribe as</span> <span className="flex gap-1 items-center max-w-full grow min-w-0"> <div className="w-4 h-4 shrink-0 rounded-full bg-test" />
<div className="grow truncate">{props.user.handle}</div> </span> </ButtonPrimary> ); } else return ( <div className="max-w-sm mx-auto w-full "> <HandleInput autoFocus={props.autoFocus} /> <div className="flex gap-2 justify-center items-center mx-auto pt-0.5 "> <AtmosphericHandleInfo /> <Separator classname="h-3! border-accent-contrast!" /> <div className="text-sm text-accent-contrast font-bold">Create</div> </div> </div> );};
export const LinkHandle = (props: { compact?: boolean }) => { return ( <div className={`flex flex-col text-center justify-center ${props.compact ? "gap-3" : "gap-4"}`} > <div className={`text-secondary flex flex-col ${props.compact && "text-sm leading-snug"}`} > <h4 className={`${props.compact && "text-sm"}`}> Link your universal handle </h4> <div className="text-tertiary"> to comment, recommend, and see what your friends are reading </div> <AtmosphericHandleInfo /> </div> <HandleInputandOAuth link compact /> </div> );};
export const HandleInputandOAuth = (props: { link?: boolean; compact?: boolean;}) => { return ( <div className="handleInputAndOAuth flex flex-col"> <HandleInput action="link" /> <div className={`${props.compact ? "mt-1 mb-2 text-xs" : "text-sm mt-2 mb-3"} w-full flex gap-2 items-center`} > <hr className="grow border-border-light" /> <div className="shrink-0 text-tertiary"> or {props.link ? "link with" : "sign in via"} </div> <hr className="grow border-border-light" /> </div> <ButtonPrimary compact={props.compact} className={`${props.compact && "text-sm"} `} fullWidth > <BlueskyTiny /> Bluesky </ButtonPrimary> </div> );};
export const AtSubscribeSuccess = (props: {}) => { return ( <div className="flex flex-col text-center justify-center p-4 text-secondary max-w-md"> <h2 className="text-primary pb-1">You've Subscribed!</h2> You'll recieve new posts in the <br /> <Link href={"/reader"}>Leaflet Reader</Link> <br /> <span className="text-tertiary text-sm"> or any standard.site enabled reader! </span> <hr className="my-4 border-border-light" /> <div className="flex flex-col"> <h4>Other ways to follow</h4> <Link href="">Get the RSS Feed</Link> <Link href="">Pin Custom Feed in Bluesky</Link> </div> </div> );};
export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => { return ( <Popover className="z-100! max-w-sm flex flex-col" trigger={ props.trigger ? ( props.trigger ) : ( <div className="text-accent-contrast text-sm"> What's the Atmosphere </div> ) } > <div className="font-bold text-secondary pb-1"> The Atmosphere is a growing ecosystem of social apps, like Leaflet and Bluesky. <br /> </div> <div className="pb-3 font-bold text-secondary"> One account gets you into <em>all</em> of them. </div>
<div className=" text-sm text-tertiary uppercase"> Apps on the Atmosphere! </div> <div className="opaque-container pt-3 pb-2 overflow-hidden"> <div className="logo-scroll-track flex w-max"> {( [ "Leaflet", "Bluesky", "Blacksky", "Eurosky", "Tangled", "Semble", "Surf", "Spark", "Pckt", "pdsls", "plyr.fm", "Popfeed", "Roomy", "Sill", "Offprint", "Margin", "Anisota", "Blento", "Cartridge", "Graze", "Leaflet", "Bluesky", "Blacksky", "Eurosky", "Tangled", "Semble", "Surf", "Spark", "Pckt", "pdsls", "plyr.fm", "Popfeed", "Roomy", "Sill", "Offprint", "Margin", "Anisota", "Blento", "Cartridge", "Graze", ] as (keyof typeof logos)[] ).map((name, i) => ( <AtApp key={i} logo={logos[name]} name={name} /> ))} </div> </div>
<ButtonPrimary fullWidth className=" mt-3 mx-auto mb-3 mt-1"> Sign up via Bluesky! </ButtonPrimary> </Popover> );};
const AtApp = (props: { logo: string; name: string }) => { return ( <div className="w-20 flex-shrink-0 flex flex-col gap-2 justify-center text-tertiary font-bold text-sm text-center"> <img src={props.logo} alt={props.name} className="w-12 h-12 mx-auto" /> {props.name} </div> );};