a tool for shared writing and social publishing
leaflet.pub
1import { theme } from "tailwind.config";
2import { useEntity, useReplicache } from "src/replicache";
3import { LogoSmall } from "./Icons/LogoSmall";
4
5export const Watermark = (props: { mobile?: boolean }) => {
6 let { rootEntity } = useReplicache();
7 let showWatermark = useEntity(rootEntity, "theme/page-leaflet-watermark");
8 if (!showWatermark?.data.value) return null;
9 return (
10 <a
11 href="https://about.leaflet.pub"
12 className="hover:no-underline w-fit italic"
13 target="_blank"
14 >
15 <div className="sm:mb-2 sm:ml-4 group/watermark flex sm:flex-col gap-2 items-center justify-center ">
16 <div
17 className="sm:hidden group-hover/watermark:block sm:rotate-180 sm:py-1 sm:px-0 px-1 w-max rounded-md h-fit whitespace-nowrap text-sm text-tertiary"
18 style={{
19 writingMode: !props.mobile ? "vertical-lr" : "horizontal-tb",
20 backgroundColor: "rgba(var(--bg-page), 0.7)",
21 }}
22 >
23 made using <span className="text-accent-1 font-bold">Leaflet</span>
24 </div>
25 <LogoSmall
26 strokeColor={theme.colors["bg-page"]}
27 className="text-accent-1 sm:text-tertiary group-hover/watermark:text-accent-1"
28 />
29 </div>
30 </a>
31 );
32};