Components
Loading preview...
Incoming Call Notification This component displays an incoming call notification card. It's designed to be highly reusable, with props for caller information and action handlers. It uses framer-motion for smooth enter/exit animations and a subtle pulsing effect to draw attention.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-16'use client';
import { useState } from 'react';
import { IncomingCall } from '@/components/ui/card-16'; // Adjust path as needed
import { Button } from '@/components/ui/button';
export default function IncomingCallDemo() {
const [isReceivingCall, setIsReceivingCall] = useState(false);
// Handlers to control the component's state
const handleAccept = () => {
console.log('Call accepted');
setIsReceivingCall(false);
};
const handleDecline = () => {
console.log('Call declined');
setIsReceivingCall(false);
};
const handleClose = () => {
console.log('Notification closed');
setIsReceivingCall(false);
};
return (
<div className="flex h-[400px] w-full items-center justify-center rounded-md border">
<Button
onClick={() => setIsReceivingCall(true)}
disabled={isReceivingCall}
>
Simulate Incoming Call
</Button>
<IncomingCall
isOpen={isReceivingCall}
callerName="Derry Mustofa"
callerInfo="Driver"
statusText="is calling you..."
avatarUrl="https://i.pravatar.cc/150?u=derrymustofa"
onAccept={handleAccept}
onDecline={handleDecline}
onClose={handleClose}
/>
</div>
);
}