Map Watermark

1"use client"
2 
3import type { ReactNode } from "react"
4import { cn } from "@/lib/utils"
5 
6type MapWatermarkPosition =
7  | "center"
8  | "top-left"
9  | "top-right"
10  | "bottom-left"
11  | "bottom-right"
12  | "top"
13  | "bottom"
14  | "left"
15  | "right"
16 
17type MapWatermarkProps = {
18  children: ReactNode
19  position?: MapWatermarkPosition
20  className?: string
21}
22 
23const DEFAULT_POSITION: MapWatermarkPosition = "center"
24 
25const POSITION_CLASSES: Record<MapWatermarkPosition, string> = {
26  center: "inset-0 items-center justify-center",
27  top: "inset-x-0 top-0 items-start justify-center pt-4",
28  bottom: "inset-x-0 bottom-0 items-end justify-center pb-4",
29  left: "inset-y-0 left-0 items-center justify-start pl-4",
30  right: "inset-y-0 right-0 items-center justify-end pr-4",
31  "top-left": "top-0 left-0 items-start justify-start p-4",
32  "top-right": "top-0 right-0 items-start justify-end p-4",
33  "bottom-left": "bottom-0 left-0 items-end justify-start p-4",
34  "bottom-right": "bottom-0 right-0 items-end justify-end p-4",
35}
36 
37export const MapWatermark = ({
38  children,
39  position = DEFAULT_POSITION,
40  className = "text-[8rem] font-extrabold leading-none tracking-tighter text-black/10 dark:text-white/10",
41}: MapWatermarkProps) => {
42  const positionClass = POSITION_CLASSES[position]
43 
44  return (
45    <div
46      className={cn("absolute z-20 flex select-none pointer-events-none", positionClass, className)}
47      aria-hidden="true"
48    >
49      {children}
50    </div>
51  )
52}