Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 98x 47x 98x | import { useMemo } from "react";
import { Check } from "lucide-react";
type WhatsAppMessagePreviewProps = {
headerText?: string | null;
bodyText: string;
footerText?: string | null;
};
export function WhatsAppMessagePreview({
headerText,
bodyText,
footerText,
}: WhatsAppMessagePreviewProps) {
const previewTime = useMemo(
() =>
new Date().toLocaleTimeString("en-IN", {
hour: "2-digit",
minute: "2-digit",
hour12: false,
}),
[],
);
return (
<div className="rounded-lg bg-whatsapp-bg dark:bg-neutral-800 p-4 min-h-[120px]">
{/* Chat-style outbound message bubble */}
<div className="flex justify-end">
<div className="max-w-[85%] rounded-lg bg-whatsapp-bubble-sent dark:bg-whatsapp-green/20 px-3 py-2 shadow-sm relative">
{/* Bubble tail */}
<div className="absolute -right-1 top-0 w-2 h-3 bg-whatsapp-bubble-sent dark:bg-whatsapp-green/20 clip-bubble-tail" />
{headerText && (
<p className="text-sm font-bold text-foreground-default mb-1">
{headerText}
</p>
)}
<p className="text-sm text-foreground-default whitespace-pre-wrap break-words leading-relaxed">
{bodyText || (
<span className="text-foreground-subtle italic">
Message preview will appear here...
</span>
)}
</p>
{footerText && (
<p className="text-xs text-foreground-muted mt-1">
{footerText}
</p>
)}
{/* Time + delivery status */}
<div className="flex items-center justify-end gap-1 mt-1">
<span className="text-[10px] text-foreground-muted">
{previewTime}
</span>
<div className="flex -space-x-1.5 text-info">
<Check className="h-3 w-3" />
<Check className="h-3 w-3" />
</div>
</div>
</div>
</div>
</div>
);
}
|