feat(frontend): add MapLibre GL map components
Reusable Svelte map component library wrapping MapLibre GL JS: Map, MapMarker, MapControls, MapPopup, MapRoute, MapClusterLayer, MapArc, and supporting components. Features theme auto-detection, controlled/uncontrolled viewport, drag support, and context API. useMap hook provides reactive access. Integrated on contact page for salon location display. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
interface Props {
|
||||
children?: import("svelte").Snippet;
|
||||
class?: string;
|
||||
position?: "top" | "bottom";
|
||||
}
|
||||
|
||||
let { children, class: className, position = "top" }: Props = $props();
|
||||
|
||||
const positionClasses = {
|
||||
top: "bottom-full mb-1",
|
||||
bottom: "top-full mt-1",
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
"absolute left-1/2 -translate-x-1/2 whitespace-nowrap",
|
||||
"text-foreground text-[10px] font-medium",
|
||||
positionClasses[position],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
Reference in New Issue
Block a user