"use client"; import Link from "next/link"; import { useIdentityData } from "components/IdentityProvider"; import { theme } from "tailwind.config"; import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL"; import { Json } from "supabase/database.types"; import { AtUri } from "@atproto/syntax"; import { ActionButton } from "./ActionButton"; import { normalizePublicationRecord, type NormalizedPublication, } from "src/utils/normalizeRecords"; import { SpeedyLink } from "components/SpeedyLink"; import { PublishSmall } from "components/Icons/PublishSmall"; import { Popover } from "components/Popover"; import { BlueskyLogin } from "app/login/LoginForm"; import { ButtonSecondary } from "components/Buttons"; import { useIsMobile } from "src/hooks/isMobile"; import { useState } from "react"; import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; import { type navPages } from "./NavigationButtons"; export const PublicationButtons = (props: { currentPage: navPages; currentPubUri: string | undefined; className?: string; optionClassName?: string; }) => { let { identity } = useIdentityData(); let hasLooseleafs = !!identity?.permission_token_on_homepage.find( (f) => f.permission_tokens.leaflets_to_documents && f.permission_tokens.leaflets_to_documents[0]?.document, ); // don't show pub list button if not logged in or no pub list // we show a "start a pub" banner instead if (!identity || !identity.atp_did || identity.publications.length === 0) return ; return (
{hasLooseleafs && ( <> {/*TODO How should i get if this is the current page or not? theres not "pub" to check the uri for. Do i need to add it as an option to NavPages? thats kinda annoying*/} } nav className={`w-full! ${ props.currentPage === "looseleafs" ? "bg-bg-page! border-border!" : "" } ${props.optionClassName}`} /> )} {identity.publications ?.filter((p) => { let record = p.record as any; if (record.preferences?.greengale) return false; if ( record.theme && record.theme.$type && record.theme.$type !== "pub.leaflet.publication#theme" ) return false; return true; }) .map((d) => { return ( ); })}
New Publication
); }; export const PublicationOption = (props: { uri: string; name: string; record: Json; current?: boolean; className?: string; }) => { let record = normalizePublicationRecord(props.record); if (!record) return; return ( } nav className={`w-full! ${props.current ? "bg-bg-page! border-border!" : ""} ${props.className}`} /> ); }; const PubListEmpty = () => { let isMobile = useIsMobile(); let [state, setState] = useState<"default" | "info">("default"); if (isMobile && state == "default") return ( } nav subtext="Start a blog on ATProto!" onClick={() => { setState("info"); }} /> ); if (isMobile && state === "info") return ; else return ( } nav subtext="Start a blog on ATProto!" /> } > ); }; export const PubListEmptyContent = (props: { compact?: boolean }) => { let { identity } = useIdentityData(); return (
Publish on AT Proto
{identity && identity.atp_did ? ( // has ATProto account and no pubs <>
Start a new publication
on AT Proto
Start a Publication! ) : ( // no ATProto account and no pubs <>
Link a Bluesky account to start
a new publication on AT Proto
)}
); }; export const PubIcon = (props: { record: NormalizedPublication | null; uri: string; tiny?: boolean; small?: boolean; large?: boolean; className?: string; }) => { if (!props.record) return null; let iconSizeClassName = `${props.tiny ? "w-4 h-4" : props.small ? "w-5 h-5" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`; return props.record.icon ? (
{`${props.record.name}
) : (
{props.record?.name.slice(0, 1).toUpperCase()}
); }; export const PubListEmptyIllo = () => { return ( ); };