Incoming Call Notification

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
"use client";
 
import {
  forwardRef,
  useEffect,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import Image from "next/image";
 
import { cn } from "@/lib/cn";
import { Phone, PhoneOff } from "lucide-react";
 
const EXIT_MS = 260;
 
export type IncomingCallNotificationBannerProps = Readonly<
  {
    caller?: string;
    callType?: string;
    avatarSrc?: string;
    avatarAlt?: string;
    showTriggerLabel?: string;
    onDismiss?: () => void;
    onAccept?: () => void;
    onShow?: () => void;
  } & ComponentPropsWithoutRef<"output">
>;
 
// Incoming call — avatar, caller name, accept/decline actions.
export const IncomingCallNotificationBanner = forwardRef<
  HTMLOutputElement,
  IncomingCallNotificationBannerProps
>(
  (
    {
      className,
      caller = "Sarah Chen",
      callType = "FaceTime Audio",
      avatarSrc = "/woman.png",
      avatarAlt = "Caller",
      showTriggerLabel = "Show incoming call",
      onDismiss,
      onAccept,
      onShow,
      ...props
    },
    ref,
  ) => {
    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
 
    useEffect(() => {
      if (phase !== "closing") return;
      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
      return () => globalThis.clearTimeout(timer);
    }, [phase]);
 
    const handleDismiss = () => {
      if (phase !== "open") return;
      setPhase("closing");
      onDismiss?.();
    };
 
    const handleShow = () => {
      setPhase("open");
      onShow?.();
    };
 
    if (phase === "closed") {
      return (
        <button
          type="button"
          onClick={handleShow}
          className={cn(
            "cursor-pointer rounded-xl bg-[#f2f2f7] px-4 py-2 text-xs font-medium text-neutral-700",
            "opacity-100 starting:opacity-0",
            "transition-opacity duration-280 ease-out hover:bg-[#e8e8ed]",
            className,
          )}
        >
          {showTriggerLabel}
        </button>
      );
    }
 
    return (
      <output
        ref={ref}
        data-slot="incoming-call-notification-banner"
        data-phase={phase}
        className={cn(
          "block w-80 rounded-[1.25rem] border border-white/70 bg-white/90 p-3.5 font-sans backdrop-blur-xl",
          "shadow-[0_8px_32px_-4px_rgba(0,0,0,0.10)]",
          "translate-y-0 opacity-100 starting:-translate-y-2.5 starting:opacity-0",
          "transition-all duration-340 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
          "data-[phase=closing]:-translate-y-2 data-[phase=closing]:opacity-0",
          "data-[phase=closing]:duration-260 data-[phase=closing]:ease-[cubic-bezier(0.4,0,0.6,1)]",
          className,
        )}
        {...props}
      >
        <div className="flex items-center gap-3">
          <div className="relative size-11 shrink-0 overflow-hidden rounded-full ring-2 ring-neutral-100">
            <Image
              src={avatarSrc}
              alt={avatarAlt}
              fill
              sizes="44px"
              className="object-cover"
            />
          </div>
 
          <div className="min-w-0 flex-1">
            <p className="truncate text-[15px] font-semibold text-neutral-900">
              {caller}
            </p>
            <p className="truncate text-[12px] text-neutral-500">{callType}</p>
          </div>
        </div>
 
        <div className="mt-3 flex gap-2">
          <button
            type="button"
            onClick={handleDismiss}
            className="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-full bg-red-500 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-red-600"
          >
            <PhoneOff size={14} strokeWidth={2} aria-hidden />
            Decline
          </button>
          <button
            type="button"
            onClick={onAccept}
            className="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-full bg-emerald-500 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-emerald-600"
          >
            <Phone size={14} strokeWidth={2} aria-hidden />
            Accept
          </button>
        </div>
      </output>
    );
  },
);
 
IncomingCallNotificationBanner.displayName = "IncomingCallNotificationBanner";