Chat Header

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7interface ChatHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
8  name: string;
9  avatar?: string;
10  status?: string;
11  isOnline?: boolean;
12  onVideoCall?: () => void;
13  onVoiceCall?: () => void;
14  onSearch?: () => void;
15  onMenu?: () => void;
16  onBack?: () => void;
17  /** Slot for custom action buttons rendered before the standard actions */
18  customActions?: React.ReactNode;
19}
20 
21function VideoCallIcon({ className }: { className?: string }) {
22  return (
23    <svg viewBox="0 0 24 24" height="24" width="24" className={className}>
24      <path
25        d="M3.27 7.125v9.75c0 .975.825 1.8 1.8 1.8h9c.975 0 1.8-.825 1.8-1.8v-3.375l3.9 3.375V7.125l-3.9 3.375V7.125c0-.975-.825-1.8-1.8-1.8h-9c-.975 0-1.8.825-1.8 1.8z"
26        fill="currentColor"
27      />
28    </svg>
29  );
30}
31 
32function VoiceCallIcon({ className }: { className?: string }) {
33  return (
34    <svg viewBox="0 0 24 24" height="24" width="24" className={className}>
35      <path
36        d="M19.44 13c-.22 0-.45-.07-.67-.12a9.44 9.44 0 0 1-1.31-.39 2 2 0 0 0-2.48 1l-.22.45a12.18 12.18 0 0 1-2.66-2 12.18 12.18 0 0 1-2-2.66l.42-.28a2 2 0 0 0 1-2.48 10.33 10.33 0 0 1-.39-1.31c-.05-.22-.09-.45-.12-.68a2 2 0 0 0-2-1.73H7a2 2 0 0 0-2 2.33 15.64 15.64 0 0 0 13.67 13.67 2 2 0 0 0 2.33-2v-2.1a2 2 0 0 0-1.56-1.7z"
37        fill="currentColor"
38      />
39    </svg>
40  );
41}
42 
43function SearchIcon({ className }: { className?: string }) {
44  return (
45    <svg viewBox="0 0 24 24" height="24" width="24" className={className}>
46      <path
47        d="M15.009 13.805h-.636l-.22-.219a5.184 5.184 0 0 0 1.256-3.386 5.207 5.207 0 1 0-5.207 5.208 5.183 5.183 0 0 0 3.385-1.255l.221.22v.635l4.004 3.999 1.194-1.195-3.997-4.007zm-4.808 0a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z"
48        fill="currentColor"
49      />
50    </svg>
51  );
52}
53 
54function MenuIcon({ className }: { className?: string }) {
55  return (
56    <svg viewBox="0 0 24 24" height="24" width="24" className={className}>
57      <path
58        d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"
59        fill="currentColor"
60      />
61    </svg>
62  );
63}
64 
65function BackIcon({ className }: { className?: string }) {
66  return (
67    <svg viewBox="0 0 24 24" height="24" width="24" className={className}>
68      <path
69        d="M12 4l1.4 1.4L7.8 11H20v2H7.8l5.6 5.6L12 20l-8-8z"
70// … truncated