leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { AtUri } from "@atproto/syntax";
3import { PublicationSubscription } from "app/reader/getSubscriptions";
4import { PubIcon } from "components/ActionBar/Publications";
5import { Separator } from "components/Layout";
6import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
7import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
8import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
9import { blobRefToSrc } from "src/utils/blobRefToSrc";
10import { timeAgo } from "src/utils/timeAgo";
11import { Json } from "supabase/database.types";
12
13export const PubListing = (
14 props: PublicationSubscription & {
15 resizeHeight?: boolean;
16 },
17) => {
18 let record = props.record as PubLeafletPublication.Record;
19 let theme = usePubTheme(record);
20 let backgroundImage = record?.theme?.backgroundImage?.image?.ref
21 ? blobRefToSrc(
22 record?.theme?.backgroundImage?.image?.ref,
23 new AtUri(props.uri).host,
24 )
25 : null;
26
27 let backgroundImageRepeat = record?.theme?.backgroundImage?.repeat;
28 let backgroundImageSize = record?.theme?.backgroundImage?.width || 500;
29 if (!record) return null;
30 return (
31 <BaseThemeProvider {...theme} local>
32 <a
33 href={`https://${record.base_path}`}
34 style={{
35 backgroundImage: `url(${backgroundImage})`,
36 backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
37 backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
38 }}
39 className={`no-underline! flex flex-row gap-2
40 bg-bg-leaflet
41 border border-border-light rounded-lg
42 px-3 py-3 selected-outline
43 hover:outline-accent-contrast hover:border-accent-contrast`}
44 >
45 <div
46 className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
47 >
48 <div className="mx-auto pb-1">
49 <PubIcon record={record} uri={props.uri} large />
50 </div>
51
52 <h4 className="truncate shrink-0 ">{record.name}</h4>
53 {record.description && (
54 <p className="text-secondary text-sm max-h-full overflow-hidden pb-1">
55 {record.description}
56 </p>
57 )}
58 <div className="flex flex-col items-center justify-center text-xs text-tertiary pt-2">
59 <div className="flex flex-row gap-2 items-center">
60 {props.authorProfile?.handle}
61 </div>
62 <p>
63 Updated{" "}
64 {timeAgo(
65 props.documents_in_publications?.[0]?.documents?.indexed_at ||
66 "",
67 )}
68 </p>
69 </div>
70 </div>
71 </a>
72 </BaseThemeProvider>
73 );
74};