Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.3 kB · 32 lines
TSX
123456789101112131415161718192021222324252627282930313233import { theme } from "tailwind.config";import { useEntity, useReplicache } from "src/replicache";import { LogoSmall } from "./Icons/LogoSmall";
export const Watermark = (props: { mobile?: boolean }) => { let { rootEntity } = useReplicache(); let showWatermark = useEntity(rootEntity, "theme/page-leaflet-watermark"); if (!showWatermark?.data.value) return null; return ( <a href="https://about.leaflet.pub" className="hover:no-underline w-fit italic" target="_blank" > <div className="sm:mb-2 sm:ml-4 group/watermark flex sm:flex-col gap-2 items-center justify-center "> <div 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" style={{ writingMode: !props.mobile ? "vertical-lr" : "horizontal-tb", backgroundColor: "rgba(var(--bg-page), 0.7)", }} > made using <span className="text-accent-1 font-bold">Leaflet</span> </div> <LogoSmall strokeColor={theme.colors["bg-page"]} className="text-accent-1 sm:text-tertiary group-hover/watermark:text-accent-1" /> </div> </a> );};