Location Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { cn } from "@/lib/utils";
6import { type MessageStatus, MessageStatusIcon } from "./message-status";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8 
9export interface LocationBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
10  variant?: "incoming" | "outgoing";
11  name?: string;
12  address?: string;
13  latitude: number;
14  longitude: number;
15  /** Static map preview image URL */
16  mapImageUrl?: string;
17  timestamp?: string;
18  status?: MessageStatus;
19  showTail?: boolean;
20  onOpenMap?: () => void;
21  /** Override the default Google Maps URL */
22  mapsUrl?: string;
23  /** Override the default `<a>` element for the CTA button (e.g. Next.js Link) */
24  renderAction?: (props: { href: string; children: React.ReactNode; className: string; target?: string; rel?: string }) => React.ReactElement;
25}
26 
27const LocationBubble = React.forwardRef<HTMLDivElement, LocationBubbleProps>(
28  (
29    {
30      className,
31      variant = "incoming",
32      name,
33      address,
34      latitude,
35      longitude,
36      mapImageUrl,
37      timestamp,
38      status,
39      showTail = false,
40      onOpenMap,
41      mapsUrl: mapsUrlProp,
42      renderAction,
43      ...props
44    },
45    ref
46  ) => {
47    const isOutgoing = variant === "outgoing";
48    const mapsUrl = mapsUrlProp ?? `https://www.google.com/maps?q=${latitude},${longitude}`;
49 
50    return (
51      <div
52        className={cn(
53          "flex w-full",
54          isOutgoing ? "justify-end" : "justify-start",
55          showTail ? "mb-[6px]" : "mb-[2px]",
56          className
57        )}
58        {...props}
59        ref={ref}
60      >
61        <div
62          className={cn(
63            "font-wa relative w-[280px] overflow-hidden rounded-lg",
64            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
65            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
66          )}
67        >
68          {/* Tail */}
69          {showTail && isOutgoing && (
70            <svg viewBox="0 0 8 13" width="8" height="13" className="absolute bottom-0 -right-[8px]">
71              <path opacity="0.13" d="M5.188 12H0V0.807l6.467 8.625C7.526 10.844 6.958 12 5.188 12z" className="fill-wa-always-black" />
72              <path d="M5.188 13H0V1.807l6.467 8.625C7.526 11.844 6.958 13 5.188 13z" className="fill-wa-bubble-outgoing" />
73            </svg>
74          )}
75          {showTail && !isOutgoing && (
76// … truncated