Calling Card

Buttons

About

This is calling card

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Calling Card to your project and fits it to your theme.

Code

How Calling Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { useCall } from '@/lib/utils'
import CallingCard from '@/components/ui/calling-card'

export default function CallPage() {
  // Business logic handled here
  const { state, actions } = useCall({
    callerName: "Sarah Johnson",
    callerNumber: "+1 (555) 123-4567",
    callerImage: "https://cdn.21st.dev/assets/mirror/c5/c530b6be73e46a897fb39caaee8e3e2145eb0e995d10373ecfdc33297a0acf15.jpg",
    isIncoming: true,
    enableVideo: true,
    enableAudio: true,
    onAnswer: () => {
      console.log('Call answered!')
      // Add your business logic here
      // e.g., notify backend, update UI state, etc.
    },
    onDecline: () => {
      console.log('Call declined!')
      // Add your business logic here
    },
    onEnd: () => {
      console.log('Call ended!')
      // Add your business logic here
    }
  })

  // Example of conditional rendering based on call state
  if (state.callStatus === 'idle') {
    return (
      <div className="min-h-screen w-full flex items-center justify-center bg-gray-900">
        <div className="text-center text-white">
          <h1 className="text-2xl mb-4">No active call</h1>
          <button 
            onClick={() => window.location.reload()} 
            className="px-6 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
          >
            Simulate Incoming Call
          </button>
        </div>
      </div>
    )
  }

  // Pass all props to the reusable component
  return (
    <div className="w-full">
    <CallingCard
      callerName="Sarah Johnson"
      callerNumber="+1 (555) 123-4567"
      callerImage="https://cdn.21st.dev/assets/mirror/c5/c530b6be73e46a897fb39caaee8e3e2145eb0e995d10373ecfdc33297a0acf15.jpg"
      state={state}
      actions={actions}
      ringtoneUrl="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZURE"
    />
    </div>
  )
}