Geographic locator by phone number
import React, { useState, useEffect } from 'react';
import { MapPin, Phone, Search, Info, Globe, Hash } from 'lucide-react';
// --- DATASET: North American Numbering Plan (NANP) Area Codes --- // A comprehensive mapping of area codes to their locations. const AREA_CODE_DATA = { // US Area Codes '201': { region: 'New Jersey', country: 'US', cities: 'Jersey City, Hackensack' }, '202': { region: 'District of Columbia', country: 'US', cities: 'Washington D.C.' }, '203': { region: 'Connecticut', country: 'US', cities: 'Bridgeport, New Haven' }, '205': { region: 'Alabama', country: 'US', cities: 'Birmingham, Tuscaloosa' }, '206': { region: 'Washington', country: 'US', cities: 'Seattle' }, '207': { region: 'Maine', country: 'US', cities: 'Portland, Augusta' }, '208': { region: 'Idaho', country: 'US', cities: 'Boise, Coeur d\'Alene' }, '209': { region: 'California', country: 'US', cities: 'Stockton, Modesto' }, '210': { region: 'Texas', country: 'US', cities: 'San Antonio' }, '212': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '213': { region: 'California', country: 'US', cities: 'Los Angeles (Downtown)' }, '214': { region: 'Texas', country: 'US', cities: 'Dallas' }, '215': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '216': { region: 'Ohio', country: 'US', cities: 'Cleveland' }, '217': { region: 'Illinois', country: 'US', cities: 'Springfield, Champaign' }, '218': { region: 'Minnesota', country: 'US', cities: 'Duluth' }, '219': { region: 'Indiana', country: 'US', cities: 'Gary, Hammond' }, '220': { region: 'Ohio', country: 'US', cities: 'Suburban Columbus' }, '223': { region: 'Pennsylvania', country: 'US', cities: 'Lancaster, York' }, '224': { region: 'Illinois', country: 'US', cities: 'Evanston, Waukegan' }, '225': { region: 'Louisiana', country: 'US', cities: 'Baton Rouge' }, '227': { region: 'Maryland', country: 'US', cities: 'Silver Spring, Frederick' }, '228': { region: 'Mississippi', country: 'US', cities: 'Gulfport, Biloxi' }, '229': { region: 'Georgia', country: 'US', cities: 'Albany, Valdosta' }, '231': { region: 'Michigan', country: 'US', cities: 'Muskegon, Traverse City' }, '234': { region: 'Ohio', country: 'US', cities: 'Akron, Canton' }, '239': { region: 'Florida', country: 'US', cities: 'Fort Myers, Cape Coral' }, '240': { region: 'Maryland', country: 'US', cities: 'Hagerstown, Rockville' }, '248': { region: 'Michigan', country: 'US', cities: 'Troy, Pontiac' }, '251': { region: 'Alabama', country: 'US', cities: 'Mobile' }, '252': { region: 'North Carolina', country: 'US', cities: 'Greenville, Rocky Mount' }, '253': { region: 'Washington', country: 'US', cities: 'Tacoma' }, '254': { region: 'Texas', country: 'US', cities: 'Waco, Killeen' }, '256': { region: 'Alabama', country: 'US', cities: 'Huntsville' }, '260': { region: 'Indiana', country: 'US', cities: 'Fort Wayne' }, '262': { region: 'Wisconsin', country: 'US', cities: 'Racine, Kenosha' }, '267': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '269': { region: 'Michigan', country: 'US', cities: 'Kalamazoo' }, '270': { region: 'Kentucky', country: 'US', cities: 'Bowling Green' }, '272': { region: 'Pennsylvania', country: 'US', cities: 'Scranton, Wilkes-Barre' }, '276': { region: 'Virginia', country: 'US', cities: 'Bristol' }, '279': { region: 'California', country: 'US', cities: 'Sacramento' }, '281': { region: 'Texas', country: 'US', cities: 'Houston' }, '301': { region: 'Maryland', country: 'US', cities: 'Silver Spring' }, '302': { region: 'Delaware', country: 'US', cities: 'Wilmington, Dover' }, '303': { region: 'Colorado', country: 'US', cities: 'Denver, Boulder' }, '304': { region: 'West Virginia', country: 'US', cities: 'Charleston' }, '305': { region: 'Florida', country: 'US', cities: 'Miami, Key West' }, '307': { region: 'Wyoming', country: 'US', cities: 'Cheyenne, Casper' }, '308': { region: 'Nebraska', country: 'US', cities: 'Grand Island' }, '309': { region: 'Illinois', country: 'US', cities: 'Peoria' }, '310': { region: 'California', country: 'US', cities: 'Los Angeles (West), Santa Monica' }, '312': { region: 'Illinois', country: 'US', cities: 'Chicago (Downtown)' }, '313': { region: 'Michigan', country: 'US', cities: 'Detroit' }, '314': { region: 'Missouri', country: 'US', cities: 'St. Louis' }, '315': { region: 'New York', country: 'US', cities: 'Syracuse' }, '316': { region: 'Kansas', country: 'US', cities: 'Wichita' }, '317': { region: 'Indiana', country: 'US', cities: 'Indianapolis' }, '318': { region: 'Louisiana', country: 'US', cities: 'Shreveport' }, '319': { region: 'Iowa', country: 'US', cities: 'Cedar Rapids' }, '320': { region: 'Minnesota', country: 'US', cities: 'St. Cloud' }, '321': { region: 'Florida', country: 'US', cities: 'Orlando, Space Coast' }, '323': { region: 'California', country: 'US', cities: 'Los Angeles (Hollywood)' }, '325': { region: 'Texas', country: 'US', cities: 'Abilene' }, '330': { region: 'Ohio', country: 'US', cities: 'Akron' }, '331': { region: 'Illinois', country: 'US', cities: 'Aurora' }, '332': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '334': { region: 'Alabama', country: 'US', cities: 'Montgomery' }, '336': { region: 'North Carolina', country: 'US', cities: 'Greensboro, Winston-Salem' }, '337': { region: 'Louisiana', country: 'US', cities: 'Lafayette' }, '339': { region: 'Massachusetts', country: 'US', cities: 'Boston Suburbs' }, '341': { region: 'California', country: 'US', cities: 'Oakland, Berkeley' }, '346': { region: 'Texas', country: 'US', cities: 'Houston' }, '347': { region: 'New York', country: 'US', cities: 'New York City (Outer Boroughs)' }, '351': { region: 'Massachusetts', country: 'US', cities: 'Lowell' }, '352': { region: 'Florida', country: 'US', cities: 'Gainesville' }, '360': { region: 'Washington', country: 'US', cities: 'Olympia, Vancouver' }, '361': { region: 'Texas', country: 'US', cities: 'Corpus Christi' }, '364': { region: 'Kentucky', country: 'US', cities: 'Paducah' }, '380': { region: 'Ohio', country: 'US', cities: 'Columbus' }, '385': { region: 'Utah', country: 'US', cities: 'Salt Lake City' }, '386': { region: 'Florida', country: 'US', cities: 'Daytona Beach' }, '401': { region: 'Rhode Island', country: 'US', cities: 'Providence' }, '402': { region: 'Nebraska', country: 'US', cities: 'Omaha' }, '404': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '405': { region: 'Oklahoma', country: 'US', cities: 'Oklahoma City' }, '406': { region: 'Montana', country: 'US', cities: 'All Regions' }, '407': { region: 'Florida', country: 'US', cities: 'Orlando' }, '408': { region: 'California', country: 'US', cities: 'San Jose, Silicon Valley' }, '409': { region: 'Texas', country: 'US', cities: 'Beaumont' }, '410': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '412': { region: 'Pennsylvania', country: 'US', cities: 'Pittsburgh' }, '413': { region: 'Massachusetts', country: 'US', cities: 'Springfield' }, '414': { region: 'Wisconsin', country: 'US', cities: 'Milwaukee' }, '415': { region: 'California', country: 'US', cities: 'San Francisco' }, '417': { region: 'Missouri', country: 'US', cities: 'Springfield, Joplin' }, '419': { region: 'Ohio', country: 'US', cities: 'Toledo' }, '423': { region: 'Tennessee', country: 'US', cities: 'Chattanooga, Knoxville' }, '424': { region: 'California', country: 'US', cities: 'Los Angeles (West)' }, '425': { region: 'Washington', country: 'US', cities: 'Bellevue, Redmond' }, '430': { region: 'Texas', country: 'US', cities: 'Tyler' }, '432': { region: 'Texas', country: 'US', cities: 'Midland, Odessa' }, '434': { region: 'Virginia', country: 'US', cities: 'Charlottesville, Lynchburg' }, '435': { region: 'Utah', country: 'US', cities: 'St. George, Park City' }, '440': { region: 'Ohio', country: 'US', cities: 'Cleveland Suburbs' }, '442': { region: 'California', country: 'US', cities: 'Oceanside, Palm Springs' }, '443': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '445': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '458': { region: 'Oregon', country: 'US', cities: 'Eugene' }, '463': { region: 'Indiana', country: 'US', cities: 'Indianapolis' }, '469': { region: 'Texas', country: 'US', cities: 'Dallas' }, '470': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '475': { region: 'Connecticut', country: 'US', cities: 'New Haven' }, '478': { region: 'Georgia', country: 'US', cities: 'Macon' }, '479': { region: 'Arkansas', country: 'US', cities: 'Fort Smith, Fayetteville' }, '480': { region: 'Arizona', country: 'US', cities: 'Phoenix (East Valley)' }, '484': { region: 'Pennsylvania', country: 'US', cities: 'Allentown, Reading' }, '501': { region: 'Arkansas', country: 'US', cities: 'Little Rock' }, '502': { region: 'Kentucky', country: 'US', cities: 'Louisville' }, '503': { region: 'Oregon', country: 'US', cities: 'Portland' }, '504': { region: 'Louisiana', country: 'US', cities: 'New Orleans' }, '505': { region: 'New Mexico', country: 'US', cities: 'Albuquerque' }, '507': { region: 'Minnesota', country: 'US', cities: 'Rochester' }, '508': { region: 'Massachusetts', country: 'US', cities: 'Worcester, Cape Cod' }, '509': { region: 'Washington', country: 'US', cities: 'Spokane' }, '510': { region: 'California', country: 'US', cities: 'Oakland' }, '512': { region: 'Texas', country: 'US', cities: 'Austin' }, '513': { region: 'Ohio', country: 'US', cities: 'Cincinnati' }, '515': { region: 'Iowa', country: 'US', cities: 'Des Moines' }, '516': { region: 'New York', country: 'US', cities: 'Long Island (Nassau)' }, '517': { region: 'Michigan', country: 'US', cities: 'Lansing' }, '518': { region: 'New York', country: 'US', cities: 'Albany' }, '520': { region: 'Arizona', country: 'US', cities: 'Tucson' }, '530': { region: 'California', country: 'US', cities: 'Redding, Davis' }, '531': { region: 'Nebraska', country: 'US', cities: 'Omaha' }, '534': { region: 'Wisconsin', country: 'US', cities: 'Eau Claire' }, '539': { region: 'Oklahoma', country: 'US', cities: 'Tulsa' }, '540': { region: 'Virginia', country: 'US', cities: 'Roanoke' }, '541': { region: 'Oregon', country: 'US', cities: 'Eugene, Medford' }, '551': { region: 'New Jersey', country: 'US', cities: 'Jersey City' }, '559': { region: 'California', country: 'US', cities: 'Fresno' }, '561': { region: 'Florida', country: 'US', cities: 'West Palm Beach' }, '562': { region: 'California', country: 'US', cities: 'Long Beach' }, '563': { region: 'Iowa', country: 'US', cities: 'Davenport' }, '564': { region: 'Washington', country: 'US', cities: 'Western Washington' }, '567': { region: 'Ohio', country: 'US', cities: 'Toledo' }, '570': { region: 'Pennsylvania', country: 'US', cities: 'Scranton' }, '571': { region: 'Virginia', country: 'US', cities: 'Arlington' }, '573': { region: 'Missouri', country: 'US', cities: 'Columbia' }, '574': { region: 'Indiana', country: 'US', cities: 'South Bend' }, '575': { region: 'New Mexico', country: 'US', cities: 'Las Cruces' }, '580': { region: 'Oklahoma', country: 'US', cities: 'Lawton' }, '585': { region: 'New York', country: 'US', cities: 'Rochester' }, '586': { region: 'Michigan', country: 'US', cities: 'Warren' }, '601': { region: 'Mississippi', country: 'US', cities: 'Jackson' }, '602': { region: 'Arizona', country: 'US', cities: 'Phoenix' }, '603': { region: 'New Hampshire', country: 'US', cities: 'All Regions' }, '605': { region: 'South Dakota', country: 'US', cities: 'All Regions' }, '606': { region: 'Kentucky', country: 'US', cities: 'Ashland' }, '607': { region: 'New York', country: 'US', cities: 'Binghamton, Ithaca' }, '608': { region: 'Wisconsin', country: 'US', cities: 'Madison' }, '609': { region: 'New Jersey', country: 'US', cities: 'Trenton, Atlantic City' }, '610': { region: 'Pennsylvania', country: 'US', cities: 'Allentown' }, '612': { region: 'Minnesota', country: 'US', cities: 'Minneapolis' }, '614': { region: 'Ohio', country: 'US', cities: 'Columbus' }, '615': { region: 'Tennessee', country: 'US', cities: 'Nashville' }, '616': { region: 'Michigan', country: 'US', cities: 'Grand Rapids' }, '617': { region: 'Massachusetts', country: 'US', cities: 'Boston' }, '618': { region: 'Illinois', country: 'US', cities: 'Carbondale' }, '619': { region: 'California', country: 'US', cities: 'San Diego' }, '620': { region: 'Kansas', country: 'US', cities: 'Hutchinson' }, '623': { region: 'Arizona', country: 'US', cities: 'Phoenix (West Valley)' }, '626': { region: 'California', country: 'US', cities: 'Pasadena' }, '628': { region: 'California', country: 'US', cities: 'San Francisco' }, '629': { region: 'Tennessee', country: 'US', cities: 'Nashville' }, '630': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '631': { region: 'New York', country: 'US', cities: 'Long Island (Suffolk)' }, '636': { region: 'Missouri', country: 'US', cities: 'Chesterfield' }, '641': { region: 'Iowa', country: 'US', cities: 'Mason City' }, '646': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '650': { region: 'California', country: 'US', cities: 'San Mateo, Palo Alto' }, '651': { region: 'Minnesota', country: 'US', cities: 'St. Paul' }, '657': { region: 'California', country: 'US', cities: 'Anaheim' }, '660': { region: 'Missouri', country: 'US', cities: 'Sedalia' }, '661': { region: 'California', country: 'US', cities: 'Bakersfield' }, '662': { region: 'Mississippi', country: 'US', cities: 'Tupelo' }, '667': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '669': { region: 'California', country: 'US', cities: 'San Jose' }, '678': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '681': { region: 'West Virginia', country: 'US', cities: 'Charleston' }, '682': { region: 'Texas', country: 'US', cities: 'Fort Worth' }, '701': { region: 'North Dakota', country: 'US', cities: 'All Regions' }, '702': { region: 'Nevada', country: 'US', cities: 'Las Vegas' }, '703': { region: 'Virginia', country: 'US', cities: 'Arlington, Fairfax' }, '704': { region: 'North Carolina', country: 'US', cities: 'Charlotte' }, '706': { region: 'Georgia', country: 'US', cities: 'Athens, Columbus' }, '707': { region: 'California', country: 'US', cities: 'Santa Rosa, Eureka' }, '708': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '712': { region: 'Iowa', country: 'US', cities: 'Sioux City' }, '713': { region: 'Texas', country: 'US', cities: 'Houston' }, '714': { region: 'California', country: 'US', cities: 'Anaheim, Santa Ana' }, '715': { region: 'Wisconsin', country: 'US', cities: 'Eau Claire' }, '716': { region: 'New York', country: 'US', cities: 'Buffalo, Niagara Falls' }, '717': { region: 'Pennsylvania', country: 'US', cities: 'Harrisburg, Lancaster' }, '718': { region: 'New York', country: 'US', cities: 'New York City (Outer Boroughs)' }, '719': { region: 'Colorado', country: 'US', cities: 'Colorado Springs' }, '720': { region: 'Colorado', country: 'US', cities: 'Denver' }, '724': { region: 'Pennsylvania', country: 'US', cities: 'New Castle' }, '725': { region: 'Nevada', country: 'US', cities: 'Las Vegas' }, '726': { region: 'Texas', country: 'US', cities: 'San Antonio' }, '727': { region: 'Florida', country: 'US', cities: 'St. Petersburg, Clearwater' }, '731': { region: 'Tennessee', country: 'US', cities: 'Jackson' }, '732': { region: 'New Jersey', country: 'US', cities: 'Toms River, New Brunswick' }, '734': { region: 'Michigan', country: 'US', cities: 'Ann Arbor' }, '737': { region: 'Texas', country: 'US', cities: 'Austin' }, '740': { region: 'Ohio', country: 'US', cities: 'Newark' }, '743': { region: 'North Carolina', country: 'US', cities: 'Greensboro' }, '747': { region: 'California', country: 'US', cities: 'Burbank' }, '754': { region: 'Florida', country: 'US', cities: 'Fort Lauderdale' }, '757': { region: 'Virginia', country: 'US', cities: 'Norfolk, Virginia Beach' }, '760': { region: 'California', country: 'US', cities: 'Palm Springs' }, '762': { region: 'Georgia', country: 'US', cities: 'Athens' }, '763': { region: 'Minnesota', country: 'US', cities: 'Brooklyn Park' }, '765': { region: 'Indiana', country: 'US', cities: 'Lafayette, Muncie' }, '769': { region: 'Mississippi', country: 'US', cities: 'Jackson' }, '770': { region: 'Georgia', country: 'US', cities: 'Marietta' }, '772': { region: 'Florida', country: 'US', cities: 'Port St. Lucie' }, '773': { region: 'Illinois', country: 'US', cities: 'Chicago (Non-Loop)' }, '774': { region: 'Massachusetts', country: 'US', cities: 'Worcester' }, '775': { region: 'Nevada', country: 'US', cities: 'Reno' }, '779': { region: 'Illinois', country: 'US', cities: 'Rockford' }, '781': { region: 'Massachusetts', country: 'US', cities: 'Boston Suburbs' }, '785': { region: 'Kansas', country: 'US', cities: 'Topeka' }, '786': { region: 'Florida', country: 'US', cities: 'Miami' }, '801': { region: 'Utah', country: 'US', cities: 'Salt Lake City' }, '802': { region: 'Vermont', country: 'US', cities: 'All Regions' }, '803': { region: 'South Carolina', country: 'US', cities: 'Columbia' }, '804': { region: 'Virginia', country: 'US', cities: 'Richmond' }, '805': { region: 'California', country: 'US', cities: 'Santa Barbara' }, '806': { region: 'Texas', country: 'US', cities: 'Lubbock, Amarillo' }, '808': { region: 'Hawaii', country: 'US', cities: 'All Regions' }, '810': { region: 'Michigan', country: 'US', cities: 'Flint' }, '812': { region: 'Indiana', country: 'US', cities: 'Evansville' }, '813': { region: 'Florida', country: 'US', cities: 'Tampa' }, '814': { region: 'Pennsylvania', country: 'US', cities: 'Erie, State College' }, '815': { region: 'Illinois', country: 'US', cities: 'Rockford, Joliet' }, '816': { region: 'Missouri', country: 'US', cities: 'Kansas City' }, '817': { region: 'Texas', country: 'US', cities: 'Fort Worth' }, '818': { region: 'California', country: 'US', cities: 'Van Nuys, Burbank' }, '828': { region: 'North Carolina', country: 'US', cities: 'Asheville' }, '830': { region: 'Texas', country: 'US', cities: 'New Braunfels' }, '831': { region: 'California', country: 'US', cities: 'Monterey, Santa Cruz' }, '832': { region: 'Texas', country: 'US', cities: 'Houston' }, '843': { region: 'South Carolina', country: 'US', cities: 'Charleston' }, '845': { region: 'New York', country: 'US', cities: 'Poughkeepsie' }, '847': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '848': { region: 'New Jersey', country: 'US', cities: 'New Brunswick' }, '850': { region: 'Florida', country: 'US', cities: 'Tallahassee, Pensacola' }, '856': { region: 'New Jersey', country: 'US', cities: 'Camden, Cherry Hill' }, '857': { region: 'Massachusetts', country: 'US', cities: 'Boston' }, '858': { region: 'California', country: 'US', cities: 'San Diego' }, '859': { region: 'Kentucky', country: 'US', cities: 'Lexington' }, '860': { region: 'Connecticut', country: 'US', cities: 'Hartford' }, '862': { region: 'New Jersey', country: 'US', cities: 'Newark' }, '863': { region: 'Florida', country: 'US', cities: 'Lakeland' }, '864': { region: 'South Carolina', country: 'US', cities: 'Greenville' }, '865': { region: 'Tennessee', country: 'US', cities: 'Knoxville' }, '870': { region: 'Arkansas', country: 'US', cities: 'Jonesboro' }, '872': { region: 'Illinois', country: 'US', cities: 'Chicago' }, '878': { region: 'Pennsylvania', country: 'US', cities: 'Pittsburgh' }, '901': { region: 'Tennessee', country: 'US', cities: 'Memphis' }, '903': { region: 'Texas', country: 'US', cities: 'Tyler, Longview' }, '904': { region: 'Florida', country: 'US', cities: 'Jacksonville' }, '906': { region: 'Michigan', country: 'US', cities: 'Upper Peninsula' }, '907': { region: 'Alaska', country: 'US', cities: 'All Regions' }, '908': { region: 'New Jersey', country: 'US', cities: 'Elizabeth' }, '909': { region: 'California', country: 'US', cities: 'San Bernardino' }, '910': { region: 'North Carolina', country: 'US', cities: 'Wilmington, Fayetteville' }, '912': { region: 'Georgia', country: 'US', cities: 'Savannah' }, '913': { region: 'Kansas', country: 'US', cities: 'Kansas City' }, '914': { region: 'New York', country: 'US', cities: 'White Plains, Yonkers' }, '915': { region: 'Texas', country: 'US', cities: 'El Paso' }, '916': { region: 'California', country: 'US', cities: 'Sacramento' }, '917': { region: 'New York', country: 'US', cities: 'New York City' }, '918': { region: 'Oklahoma', country: 'US', cities: 'Tulsa' }, '919': { region: 'North Carolina', country: 'US', cities: 'Raleigh, Durham' }, '920': { region: 'Wisconsin', country: 'US', cities: 'Green Bay' }, '925': { region: 'California', country: 'US', cities: 'Concord, Walnut Creek' }, '928': { region: 'Arizona', country: 'US', cities: 'Flagstaff, Yuma' }, '929': { region: 'New York', country: 'US', cities: 'New York City' }, '931': { region: 'Tennessee', country: 'US', cities: 'Clarksville' }, '934': { region: 'New York', country: 'US', cities: 'Long Island' }, '936': { region: 'Texas', country: 'US', cities: 'Huntsville' }, '937': { region: 'Ohio', country: 'US', cities: 'Dayton' }, '940': { region: 'Texas', country: 'US', cities: 'Denton' }, '941': { region: 'Florida', country: 'US', cities: 'Sarasota, Bradenton' }, '947': { region: 'Michigan', country: 'US', cities: 'Troy' }, '949': { region: 'California', country: 'US', cities: 'Irvine' }, '951': { region: 'California', country: 'US', cities: 'Riverside' }, '952': { region: 'Minnesota', country: 'US', cities: 'Bloomington' }, '954': { region: 'Florida', country: 'US', cities: 'Fort Lauderdale' }, '956': { region: 'Texas', country: 'US', cities: 'Laredo, Brownsville' }, '959': { region: 'Connecticut', country: 'US', cities: 'Hartford' }, '970': { region: 'Colorado', country: 'US', cities: 'Fort Collins, Grand Junction' }, '971': { region: 'Oregon', country: 'US', cities: 'Portland' }, '972': { region: 'Texas', country: 'US', cities: 'Dallas' }, '973': { region: 'New Jersey', country: 'US', cities: 'Newark, Paterson' }, '978': { region: 'Massachusetts', country: 'US', cities: 'Lowell' }, '979': { region: 'Texas', country: 'US', cities: 'College Station' }, '980': { region: 'North Carolina', country: 'US', cities: 'Charlotte' }, '984': { region: 'North Carolina', country: 'US', cities: 'Raleigh' }, '985': { region: 'Louisiana', country: 'US', cities: 'Houma, Slidell' }, '986': { region: 'Idaho', country: 'US', cities: 'All Regions' }, '989': { region: 'Michigan', country: 'US', cities: 'Saginaw' },
// Canadian Area Codes '204': { region: 'Manitoba', country: 'CA', cities: 'Winnipeg' }, '226': { region: 'Ontario', country: 'CA', cities: 'London, Windsor' }, '236': { region: 'British Columbia', country: 'CA', cities: 'Vancouver, Victoria' }, '249': { region: 'Ontario', country: 'CA', cities: 'Sudbury, Sault Ste. Marie' }, '250': { region: 'British Columbia', country: 'CA', cities: 'Victoria, Kelowna' }, '263': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '289': { region: 'Ontario', country: 'CA', cities: 'Hamilton, Niagara' }, '306': { region: 'Saskatchewan', country: 'CA', cities: 'Saskatoon, Regina' }, '343': { region: 'Ontario', country: 'CA', cities: 'Ottawa' }, '354': { region: 'Quebec', country: 'CA', cities: 'Granby' }, '365': { region: 'Ontario', country: 'CA', cities: 'Hamilton' }, '367': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '368': { region: 'Alberta', country: 'CA', cities: 'Calgary' }, '403': { region: 'Alberta', country: 'CA', cities: 'Calgary' }, '416': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '418': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '431': { region: 'Manitoba', country: 'CA', cities: 'Winnipeg' }, '437': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '438': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '450': { region: 'Quebec', country: 'CA', cities: 'Laval, Longueuil' }, '506': { region: 'New Brunswick', country: 'CA', cities: 'All Regions' }, '514': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '519': { region: 'Ontario', country: 'CA', cities: 'London, Windsor' }, '548': { region: 'Ontario', country: 'CA', cities: 'Southwestern Ontario' }, '579': { region: 'Quebec', country: 'CA', cities: 'Outer Montreal' }, '581': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '587': { region: 'Alberta', country: 'CA', cities: 'Calgary, Edmonton' }, '604': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '613': { region: 'Ontario', country: 'CA', cities: 'Ottawa, Kingston' }, '639': { region: 'Saskatchewan', country: 'CA', cities: 'All Regions' }, '647': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '672': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '705': { region: 'Ontario', country: 'CA', cities: 'Sudbury, Barrie' }, '709': { region: 'Newfoundland and Labrador', country: 'CA', cities: 'St. John\'s' }, '753': { region: 'Ontario', country: 'CA', cities: 'Ottawa' }, '778': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '780': { region: 'Alberta', country: 'CA', cities: 'Edmonton' }, '782': { region: 'Nova Scotia/PEI', country: 'CA', cities: 'Halifax, Charlottetown' }, '807': { region: 'Ontario', country: 'CA', cities: 'Thunder Bay' }, '819': { region: 'Quebec', country: 'CA', cities: 'Gatineau, Sherbrooke' }, '825': { region: 'Alberta', country: 'CA', cities: 'Calgary, Edmonton' }, '867': { region: 'Northern Canada', country: 'CA', cities: 'Yukon, NWT, Nunavut' }, '873': { region: 'Quebec', country: 'CA', cities: 'Gatineau' }, '902': { region: 'Nova Scotia/PEI', country: 'CA', cities: 'Halifax, Charlottetown' }, '905': { region: 'Ontario', country: 'CA', cities: 'Hamilton, Mississauga' },
// Caribbean / Other NANP '242': { region: 'Bahamas', country: 'BS', cities: 'Nassau' }, '246': { region: 'Barbados', country: 'BB', cities: 'Bridgetown' }, '264': { region: 'Anguilla', country: 'AI', cities: 'The Valley' }, '268': { region: 'Antigua and Barbuda', country: 'AG', cities: 'St. John\'s' }, '284': { region: 'British Virgin Islands', country: 'VG', cities: 'Road Town' }, '340': { region: 'US Virgin Islands', country: 'VI', cities: 'Charlotte Amalie' }, '345': { region: 'Cayman Islands', country: 'KY', cities: 'George Town' }, '441': { region: 'Bermuda', country: 'BM', cities: 'Hamilton' }, '473': { region: 'Grenada', country: 'GD', cities: 'St. George\'s' }, '649': { region: 'Turks and Caicos', country: 'TC', cities: 'Cockburn Town' }, '658': { region: 'Jamaica', country: 'JM', cities: 'Kingston' }, '664': { region: 'Montserrat', country: 'MS', cities: 'Brades' }, '670': { region: 'Northern Mariana Islands', country: 'MP', cities: 'Saipan' }, '671': { region: 'Guam', country: 'GU', cities: 'Hagåtña' }, '684': { region: 'American Samoa', country: 'AS', cities: 'Pago Pago' }, '721': { region: 'Sint Maarten', country: 'SX', cities: 'Philipsburg' }, '758': { region: 'Saint Lucia', country: 'LC', cities: 'Castries' }, '767': { region: 'Dominica', country: 'DM', cities: 'Roseau' }, '784': { region: 'St. Vincent & Grenadines', country: 'VC', cities: 'Kingstown' }, '787': { region: 'Puerto Rico', country: 'PR', cities: 'San Juan' }, '809': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '829': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '849': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '868': { region: 'Trinidad and Tobago', country: 'TT', cities: 'Port of Spain' }, '869': { region: 'St. Kitts and Nevis', country: 'KN', cities: 'Basseterre' }, '876': { region: 'Jamaica', country: 'JM', cities: 'Kingston' }, '939': { region: 'Puerto Rico', country: 'PR', cities: 'San Juan' }, };
const CountryBadge = ({ code }) => { const colors = { US: 'bg-blue-100 text-blue-800 border-blue-200', CA: 'bg-red-100 text-red-800 border-red-200', BS: 'bg-teal-100 text-teal-800 border-teal-200', BB: 'bg-yellow-100 text-yellow-800 border-yellow-200', PR: 'bg-purple-100 text-purple-800 border-purple-200', JM: 'bg-green-100 text-green-800 border-green-200', DO: 'bg-orange-100 text-orange-800 border-orange-200', DEFAULT: 'bg-gray-100 text-gray-800 border-gray-200' }; const names = { US: 'United States', CA: 'Canada', BS: 'Bahamas', BB: 'Barbados', PR: 'Puerto Rico', JM: 'Jamaica', DO: 'Dominican Republic', VI: 'US Virgin Islands', BM: 'Bermuda' };
const colorClass = colors[code] || colors.DEFAULT; const name = names[code] || code;
return ( <span className={`px-3 py-1 rounded-full text-xs font-semibold border ${colorClass} inline-flex items-center gap-1`}> <Globe className="w-3 h-3" /> {name} </span> ); };
export default function App() { const [input, setInput] = useState(''); const [parsedData, setParsedData] = useState(null); const [areaCode, setAreaCode] = useState('');
// Format phone number as (XXX) XXX-XXXX const formatPhoneNumber = (value) => { if (!value) return value; const phoneNumber = value.replace(/[^\d]/g, ''); const phoneNumberLength = phoneNumber.length; if (phoneNumberLength < 4) return phoneNumber; if (phoneNumberLength < 7) { return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`; } return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`; };
const handleInputChange = (e) => { const rawValue = e.target.value; // Allow deleting by checking if new length is shorter if (rawValue.length < input.length) { setInput(rawValue); // Recalculate logic for deletion const cleaned = rawValue.replace(/\D/g, ''); if (cleaned.length >= 3) { const ac = cleaned.substring(0, 3); setAreaCode(ac); setParsedData(AREA_CODE_DATA[ac] || null); } else { setAreaCode(''); setParsedData(null); } return; }
const formatted = formatPhoneNumber(rawValue); setInput(formatted);
const cleaned = formatted.replace(/\D/g, ''); if (cleaned.length >= 3) { const ac = cleaned.substring(0, 3); setAreaCode(ac); setParsedData(AREA_CODE_DATA[ac] || null); } else { setAreaCode(''); setParsedData(null); } };
return ( <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-900"> <div className="max-w-md w-full bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100"> {/* Header */} <div className="bg-indigo-600 p-6 text-white text-center relative overflow-hidden"> <div className="absolute top-0 left-0 w-full h-full opacity-10"> <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0 100 C 20 0 50 0 100 100 Z" fill="white" /> </svg> </div> <div className="relative z-10 flex flex-col items-center"> <div className="bg-white/20 p-3 rounded-full mb-3 backdrop-blur-sm"> <MapPin className="w-8 h-8 text-white" /> </div> <h1 className="text-2xl font-bold">Area Code Finder</h1> <p className="text-indigo-100 text-sm mt-1">Identify North American Locations</p> </div> </div>
{/* Body */} <div className="p-6 space-y-6"> {/* Input Section */} <div className="space-y-2"> <label className="block text-sm font-medium text-slate-600 ml-1"> Enter Phone Number </label> <div className="relative group"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Phone className="h-5 w-5 text-slate-400 group-focus-within:text-indigo-500 transition-colors" /> </div> <input type="text" value={input} onChange={handleInputChange} placeholder="(555) 123-4567" className="block w-full pl-10 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-xl text-lg font-medium placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all shadow-sm" maxLength={14} /> </div> <p className="text-xs text-slate-400 ml-1"> Supports US, Canada, and Caribbean numbers (+1) </p> </div>
{/* Results Section */} <div className="min-h-[180px]"> {areaCode.length === 3 ? ( parsedData ? ( <div className="bg-white border border-slate-100 rounded-2xl shadow-sm p-5 space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300"> <div className="flex justify-between items-start"> <div> <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Region</p> <h2 className="text-2xl font-bold text-slate-800 leading-tight">{parsedData.region}</h2> </div> <div className="flex flex-col items-end"> <div className="text-3xl font-black text-indigo-100 select-none">{areaCode}</div> </div> </div>
<div className="flex items-center gap-2"> <CountryBadge code={parsedData.country} /> </div> <div className="pt-4 border-t border-slate-50"> <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1"> <Info className="w-3 h-3" /> Major Cities / Areas </p> <p className="text-sm text-slate-600 leading-relaxed"> {parsedData.cities} </p> </div> </div> ) : ( <div className="bg-red-50 border border-red-100 rounded-2xl p-5 text-center animate-in fade-in zoom-in duration-300"> <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3"> <Search className="w-6 h-6 text-red-500" /> </div> <h3 className="text-red-900 font-semibold">Unknown Area Code</h3> <p className="text-red-600/80 text-sm mt-1"> Area code <span className="font-mono font-bold">{areaCode}</span> was not found in our database. </p> </div> ) ) : ( <div className="h-full flex flex-col items-center justify-center text-center p-6 text-slate-300 border-2 border-dashed border-slate-100 rounded-2xl"> <Hash className="w-12 h-12 mb-3 opacity-50" /> <p className="text-sm font-medium text-slate-400">Start typing a number...</p> <p className="text-xs mt-1">We'll detect the location automatically.</p> </div> )} </div> </div>
{/* Footer */} <div className="bg-slate-50 px-6 py-4 border-t border-slate-100 text-center"> <p className="text-xs text-slate-400"> Data based on the North American Numbering Plan (NANP). </p> </div>
</div> </div> ); }
// --- DATASET: North American Numbering Plan (NANP) Area Codes --- // A comprehensive mapping of area codes to their locations. const AREA_CODE_DATA = { // US Area Codes '201': { region: 'New Jersey', country: 'US', cities: 'Jersey City, Hackensack' }, '202': { region: 'District of Columbia', country: 'US', cities: 'Washington D.C.' }, '203': { region: 'Connecticut', country: 'US', cities: 'Bridgeport, New Haven' }, '205': { region: 'Alabama', country: 'US', cities: 'Birmingham, Tuscaloosa' }, '206': { region: 'Washington', country: 'US', cities: 'Seattle' }, '207': { region: 'Maine', country: 'US', cities: 'Portland, Augusta' }, '208': { region: 'Idaho', country: 'US', cities: 'Boise, Coeur d\'Alene' }, '209': { region: 'California', country: 'US', cities: 'Stockton, Modesto' }, '210': { region: 'Texas', country: 'US', cities: 'San Antonio' }, '212': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '213': { region: 'California', country: 'US', cities: 'Los Angeles (Downtown)' }, '214': { region: 'Texas', country: 'US', cities: 'Dallas' }, '215': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '216': { region: 'Ohio', country: 'US', cities: 'Cleveland' }, '217': { region: 'Illinois', country: 'US', cities: 'Springfield, Champaign' }, '218': { region: 'Minnesota', country: 'US', cities: 'Duluth' }, '219': { region: 'Indiana', country: 'US', cities: 'Gary, Hammond' }, '220': { region: 'Ohio', country: 'US', cities: 'Suburban Columbus' }, '223': { region: 'Pennsylvania', country: 'US', cities: 'Lancaster, York' }, '224': { region: 'Illinois', country: 'US', cities: 'Evanston, Waukegan' }, '225': { region: 'Louisiana', country: 'US', cities: 'Baton Rouge' }, '227': { region: 'Maryland', country: 'US', cities: 'Silver Spring, Frederick' }, '228': { region: 'Mississippi', country: 'US', cities: 'Gulfport, Biloxi' }, '229': { region: 'Georgia', country: 'US', cities: 'Albany, Valdosta' }, '231': { region: 'Michigan', country: 'US', cities: 'Muskegon, Traverse City' }, '234': { region: 'Ohio', country: 'US', cities: 'Akron, Canton' }, '239': { region: 'Florida', country: 'US', cities: 'Fort Myers, Cape Coral' }, '240': { region: 'Maryland', country: 'US', cities: 'Hagerstown, Rockville' }, '248': { region: 'Michigan', country: 'US', cities: 'Troy, Pontiac' }, '251': { region: 'Alabama', country: 'US', cities: 'Mobile' }, '252': { region: 'North Carolina', country: 'US', cities: 'Greenville, Rocky Mount' }, '253': { region: 'Washington', country: 'US', cities: 'Tacoma' }, '254': { region: 'Texas', country: 'US', cities: 'Waco, Killeen' }, '256': { region: 'Alabama', country: 'US', cities: 'Huntsville' }, '260': { region: 'Indiana', country: 'US', cities: 'Fort Wayne' }, '262': { region: 'Wisconsin', country: 'US', cities: 'Racine, Kenosha' }, '267': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '269': { region: 'Michigan', country: 'US', cities: 'Kalamazoo' }, '270': { region: 'Kentucky', country: 'US', cities: 'Bowling Green' }, '272': { region: 'Pennsylvania', country: 'US', cities: 'Scranton, Wilkes-Barre' }, '276': { region: 'Virginia', country: 'US', cities: 'Bristol' }, '279': { region: 'California', country: 'US', cities: 'Sacramento' }, '281': { region: 'Texas', country: 'US', cities: 'Houston' }, '301': { region: 'Maryland', country: 'US', cities: 'Silver Spring' }, '302': { region: 'Delaware', country: 'US', cities: 'Wilmington, Dover' }, '303': { region: 'Colorado', country: 'US', cities: 'Denver, Boulder' }, '304': { region: 'West Virginia', country: 'US', cities: 'Charleston' }, '305': { region: 'Florida', country: 'US', cities: 'Miami, Key West' }, '307': { region: 'Wyoming', country: 'US', cities: 'Cheyenne, Casper' }, '308': { region: 'Nebraska', country: 'US', cities: 'Grand Island' }, '309': { region: 'Illinois', country: 'US', cities: 'Peoria' }, '310': { region: 'California', country: 'US', cities: 'Los Angeles (West), Santa Monica' }, '312': { region: 'Illinois', country: 'US', cities: 'Chicago (Downtown)' }, '313': { region: 'Michigan', country: 'US', cities: 'Detroit' }, '314': { region: 'Missouri', country: 'US', cities: 'St. Louis' }, '315': { region: 'New York', country: 'US', cities: 'Syracuse' }, '316': { region: 'Kansas', country: 'US', cities: 'Wichita' }, '317': { region: 'Indiana', country: 'US', cities: 'Indianapolis' }, '318': { region: 'Louisiana', country: 'US', cities: 'Shreveport' }, '319': { region: 'Iowa', country: 'US', cities: 'Cedar Rapids' }, '320': { region: 'Minnesota', country: 'US', cities: 'St. Cloud' }, '321': { region: 'Florida', country: 'US', cities: 'Orlando, Space Coast' }, '323': { region: 'California', country: 'US', cities: 'Los Angeles (Hollywood)' }, '325': { region: 'Texas', country: 'US', cities: 'Abilene' }, '330': { region: 'Ohio', country: 'US', cities: 'Akron' }, '331': { region: 'Illinois', country: 'US', cities: 'Aurora' }, '332': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '334': { region: 'Alabama', country: 'US', cities: 'Montgomery' }, '336': { region: 'North Carolina', country: 'US', cities: 'Greensboro, Winston-Salem' }, '337': { region: 'Louisiana', country: 'US', cities: 'Lafayette' }, '339': { region: 'Massachusetts', country: 'US', cities: 'Boston Suburbs' }, '341': { region: 'California', country: 'US', cities: 'Oakland, Berkeley' }, '346': { region: 'Texas', country: 'US', cities: 'Houston' }, '347': { region: 'New York', country: 'US', cities: 'New York City (Outer Boroughs)' }, '351': { region: 'Massachusetts', country: 'US', cities: 'Lowell' }, '352': { region: 'Florida', country: 'US', cities: 'Gainesville' }, '360': { region: 'Washington', country: 'US', cities: 'Olympia, Vancouver' }, '361': { region: 'Texas', country: 'US', cities: 'Corpus Christi' }, '364': { region: 'Kentucky', country: 'US', cities: 'Paducah' }, '380': { region: 'Ohio', country: 'US', cities: 'Columbus' }, '385': { region: 'Utah', country: 'US', cities: 'Salt Lake City' }, '386': { region: 'Florida', country: 'US', cities: 'Daytona Beach' }, '401': { region: 'Rhode Island', country: 'US', cities: 'Providence' }, '402': { region: 'Nebraska', country: 'US', cities: 'Omaha' }, '404': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '405': { region: 'Oklahoma', country: 'US', cities: 'Oklahoma City' }, '406': { region: 'Montana', country: 'US', cities: 'All Regions' }, '407': { region: 'Florida', country: 'US', cities: 'Orlando' }, '408': { region: 'California', country: 'US', cities: 'San Jose, Silicon Valley' }, '409': { region: 'Texas', country: 'US', cities: 'Beaumont' }, '410': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '412': { region: 'Pennsylvania', country: 'US', cities: 'Pittsburgh' }, '413': { region: 'Massachusetts', country: 'US', cities: 'Springfield' }, '414': { region: 'Wisconsin', country: 'US', cities: 'Milwaukee' }, '415': { region: 'California', country: 'US', cities: 'San Francisco' }, '417': { region: 'Missouri', country: 'US', cities: 'Springfield, Joplin' }, '419': { region: 'Ohio', country: 'US', cities: 'Toledo' }, '423': { region: 'Tennessee', country: 'US', cities: 'Chattanooga, Knoxville' }, '424': { region: 'California', country: 'US', cities: 'Los Angeles (West)' }, '425': { region: 'Washington', country: 'US', cities: 'Bellevue, Redmond' }, '430': { region: 'Texas', country: 'US', cities: 'Tyler' }, '432': { region: 'Texas', country: 'US', cities: 'Midland, Odessa' }, '434': { region: 'Virginia', country: 'US', cities: 'Charlottesville, Lynchburg' }, '435': { region: 'Utah', country: 'US', cities: 'St. George, Park City' }, '440': { region: 'Ohio', country: 'US', cities: 'Cleveland Suburbs' }, '442': { region: 'California', country: 'US', cities: 'Oceanside, Palm Springs' }, '443': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '445': { region: 'Pennsylvania', country: 'US', cities: 'Philadelphia' }, '458': { region: 'Oregon', country: 'US', cities: 'Eugene' }, '463': { region: 'Indiana', country: 'US', cities: 'Indianapolis' }, '469': { region: 'Texas', country: 'US', cities: 'Dallas' }, '470': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '475': { region: 'Connecticut', country: 'US', cities: 'New Haven' }, '478': { region: 'Georgia', country: 'US', cities: 'Macon' }, '479': { region: 'Arkansas', country: 'US', cities: 'Fort Smith, Fayetteville' }, '480': { region: 'Arizona', country: 'US', cities: 'Phoenix (East Valley)' }, '484': { region: 'Pennsylvania', country: 'US', cities: 'Allentown, Reading' }, '501': { region: 'Arkansas', country: 'US', cities: 'Little Rock' }, '502': { region: 'Kentucky', country: 'US', cities: 'Louisville' }, '503': { region: 'Oregon', country: 'US', cities: 'Portland' }, '504': { region: 'Louisiana', country: 'US', cities: 'New Orleans' }, '505': { region: 'New Mexico', country: 'US', cities: 'Albuquerque' }, '507': { region: 'Minnesota', country: 'US', cities: 'Rochester' }, '508': { region: 'Massachusetts', country: 'US', cities: 'Worcester, Cape Cod' }, '509': { region: 'Washington', country: 'US', cities: 'Spokane' }, '510': { region: 'California', country: 'US', cities: 'Oakland' }, '512': { region: 'Texas', country: 'US', cities: 'Austin' }, '513': { region: 'Ohio', country: 'US', cities: 'Cincinnati' }, '515': { region: 'Iowa', country: 'US', cities: 'Des Moines' }, '516': { region: 'New York', country: 'US', cities: 'Long Island (Nassau)' }, '517': { region: 'Michigan', country: 'US', cities: 'Lansing' }, '518': { region: 'New York', country: 'US', cities: 'Albany' }, '520': { region: 'Arizona', country: 'US', cities: 'Tucson' }, '530': { region: 'California', country: 'US', cities: 'Redding, Davis' }, '531': { region: 'Nebraska', country: 'US', cities: 'Omaha' }, '534': { region: 'Wisconsin', country: 'US', cities: 'Eau Claire' }, '539': { region: 'Oklahoma', country: 'US', cities: 'Tulsa' }, '540': { region: 'Virginia', country: 'US', cities: 'Roanoke' }, '541': { region: 'Oregon', country: 'US', cities: 'Eugene, Medford' }, '551': { region: 'New Jersey', country: 'US', cities: 'Jersey City' }, '559': { region: 'California', country: 'US', cities: 'Fresno' }, '561': { region: 'Florida', country: 'US', cities: 'West Palm Beach' }, '562': { region: 'California', country: 'US', cities: 'Long Beach' }, '563': { region: 'Iowa', country: 'US', cities: 'Davenport' }, '564': { region: 'Washington', country: 'US', cities: 'Western Washington' }, '567': { region: 'Ohio', country: 'US', cities: 'Toledo' }, '570': { region: 'Pennsylvania', country: 'US', cities: 'Scranton' }, '571': { region: 'Virginia', country: 'US', cities: 'Arlington' }, '573': { region: 'Missouri', country: 'US', cities: 'Columbia' }, '574': { region: 'Indiana', country: 'US', cities: 'South Bend' }, '575': { region: 'New Mexico', country: 'US', cities: 'Las Cruces' }, '580': { region: 'Oklahoma', country: 'US', cities: 'Lawton' }, '585': { region: 'New York', country: 'US', cities: 'Rochester' }, '586': { region: 'Michigan', country: 'US', cities: 'Warren' }, '601': { region: 'Mississippi', country: 'US', cities: 'Jackson' }, '602': { region: 'Arizona', country: 'US', cities: 'Phoenix' }, '603': { region: 'New Hampshire', country: 'US', cities: 'All Regions' }, '605': { region: 'South Dakota', country: 'US', cities: 'All Regions' }, '606': { region: 'Kentucky', country: 'US', cities: 'Ashland' }, '607': { region: 'New York', country: 'US', cities: 'Binghamton, Ithaca' }, '608': { region: 'Wisconsin', country: 'US', cities: 'Madison' }, '609': { region: 'New Jersey', country: 'US', cities: 'Trenton, Atlantic City' }, '610': { region: 'Pennsylvania', country: 'US', cities: 'Allentown' }, '612': { region: 'Minnesota', country: 'US', cities: 'Minneapolis' }, '614': { region: 'Ohio', country: 'US', cities: 'Columbus' }, '615': { region: 'Tennessee', country: 'US', cities: 'Nashville' }, '616': { region: 'Michigan', country: 'US', cities: 'Grand Rapids' }, '617': { region: 'Massachusetts', country: 'US', cities: 'Boston' }, '618': { region: 'Illinois', country: 'US', cities: 'Carbondale' }, '619': { region: 'California', country: 'US', cities: 'San Diego' }, '620': { region: 'Kansas', country: 'US', cities: 'Hutchinson' }, '623': { region: 'Arizona', country: 'US', cities: 'Phoenix (West Valley)' }, '626': { region: 'California', country: 'US', cities: 'Pasadena' }, '628': { region: 'California', country: 'US', cities: 'San Francisco' }, '629': { region: 'Tennessee', country: 'US', cities: 'Nashville' }, '630': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '631': { region: 'New York', country: 'US', cities: 'Long Island (Suffolk)' }, '636': { region: 'Missouri', country: 'US', cities: 'Chesterfield' }, '641': { region: 'Iowa', country: 'US', cities: 'Mason City' }, '646': { region: 'New York', country: 'US', cities: 'New York City (Manhattan)' }, '650': { region: 'California', country: 'US', cities: 'San Mateo, Palo Alto' }, '651': { region: 'Minnesota', country: 'US', cities: 'St. Paul' }, '657': { region: 'California', country: 'US', cities: 'Anaheim' }, '660': { region: 'Missouri', country: 'US', cities: 'Sedalia' }, '661': { region: 'California', country: 'US', cities: 'Bakersfield' }, '662': { region: 'Mississippi', country: 'US', cities: 'Tupelo' }, '667': { region: 'Maryland', country: 'US', cities: 'Baltimore' }, '669': { region: 'California', country: 'US', cities: 'San Jose' }, '678': { region: 'Georgia', country: 'US', cities: 'Atlanta' }, '681': { region: 'West Virginia', country: 'US', cities: 'Charleston' }, '682': { region: 'Texas', country: 'US', cities: 'Fort Worth' }, '701': { region: 'North Dakota', country: 'US', cities: 'All Regions' }, '702': { region: 'Nevada', country: 'US', cities: 'Las Vegas' }, '703': { region: 'Virginia', country: 'US', cities: 'Arlington, Fairfax' }, '704': { region: 'North Carolina', country: 'US', cities: 'Charlotte' }, '706': { region: 'Georgia', country: 'US', cities: 'Athens, Columbus' }, '707': { region: 'California', country: 'US', cities: 'Santa Rosa, Eureka' }, '708': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '712': { region: 'Iowa', country: 'US', cities: 'Sioux City' }, '713': { region: 'Texas', country: 'US', cities: 'Houston' }, '714': { region: 'California', country: 'US', cities: 'Anaheim, Santa Ana' }, '715': { region: 'Wisconsin', country: 'US', cities: 'Eau Claire' }, '716': { region: 'New York', country: 'US', cities: 'Buffalo, Niagara Falls' }, '717': { region: 'Pennsylvania', country: 'US', cities: 'Harrisburg, Lancaster' }, '718': { region: 'New York', country: 'US', cities: 'New York City (Outer Boroughs)' }, '719': { region: 'Colorado', country: 'US', cities: 'Colorado Springs' }, '720': { region: 'Colorado', country: 'US', cities: 'Denver' }, '724': { region: 'Pennsylvania', country: 'US', cities: 'New Castle' }, '725': { region: 'Nevada', country: 'US', cities: 'Las Vegas' }, '726': { region: 'Texas', country: 'US', cities: 'San Antonio' }, '727': { region: 'Florida', country: 'US', cities: 'St. Petersburg, Clearwater' }, '731': { region: 'Tennessee', country: 'US', cities: 'Jackson' }, '732': { region: 'New Jersey', country: 'US', cities: 'Toms River, New Brunswick' }, '734': { region: 'Michigan', country: 'US', cities: 'Ann Arbor' }, '737': { region: 'Texas', country: 'US', cities: 'Austin' }, '740': { region: 'Ohio', country: 'US', cities: 'Newark' }, '743': { region: 'North Carolina', country: 'US', cities: 'Greensboro' }, '747': { region: 'California', country: 'US', cities: 'Burbank' }, '754': { region: 'Florida', country: 'US', cities: 'Fort Lauderdale' }, '757': { region: 'Virginia', country: 'US', cities: 'Norfolk, Virginia Beach' }, '760': { region: 'California', country: 'US', cities: 'Palm Springs' }, '762': { region: 'Georgia', country: 'US', cities: 'Athens' }, '763': { region: 'Minnesota', country: 'US', cities: 'Brooklyn Park' }, '765': { region: 'Indiana', country: 'US', cities: 'Lafayette, Muncie' }, '769': { region: 'Mississippi', country: 'US', cities: 'Jackson' }, '770': { region: 'Georgia', country: 'US', cities: 'Marietta' }, '772': { region: 'Florida', country: 'US', cities: 'Port St. Lucie' }, '773': { region: 'Illinois', country: 'US', cities: 'Chicago (Non-Loop)' }, '774': { region: 'Massachusetts', country: 'US', cities: 'Worcester' }, '775': { region: 'Nevada', country: 'US', cities: 'Reno' }, '779': { region: 'Illinois', country: 'US', cities: 'Rockford' }, '781': { region: 'Massachusetts', country: 'US', cities: 'Boston Suburbs' }, '785': { region: 'Kansas', country: 'US', cities: 'Topeka' }, '786': { region: 'Florida', country: 'US', cities: 'Miami' }, '801': { region: 'Utah', country: 'US', cities: 'Salt Lake City' }, '802': { region: 'Vermont', country: 'US', cities: 'All Regions' }, '803': { region: 'South Carolina', country: 'US', cities: 'Columbia' }, '804': { region: 'Virginia', country: 'US', cities: 'Richmond' }, '805': { region: 'California', country: 'US', cities: 'Santa Barbara' }, '806': { region: 'Texas', country: 'US', cities: 'Lubbock, Amarillo' }, '808': { region: 'Hawaii', country: 'US', cities: 'All Regions' }, '810': { region: 'Michigan', country: 'US', cities: 'Flint' }, '812': { region: 'Indiana', country: 'US', cities: 'Evansville' }, '813': { region: 'Florida', country: 'US', cities: 'Tampa' }, '814': { region: 'Pennsylvania', country: 'US', cities: 'Erie, State College' }, '815': { region: 'Illinois', country: 'US', cities: 'Rockford, Joliet' }, '816': { region: 'Missouri', country: 'US', cities: 'Kansas City' }, '817': { region: 'Texas', country: 'US', cities: 'Fort Worth' }, '818': { region: 'California', country: 'US', cities: 'Van Nuys, Burbank' }, '828': { region: 'North Carolina', country: 'US', cities: 'Asheville' }, '830': { region: 'Texas', country: 'US', cities: 'New Braunfels' }, '831': { region: 'California', country: 'US', cities: 'Monterey, Santa Cruz' }, '832': { region: 'Texas', country: 'US', cities: 'Houston' }, '843': { region: 'South Carolina', country: 'US', cities: 'Charleston' }, '845': { region: 'New York', country: 'US', cities: 'Poughkeepsie' }, '847': { region: 'Illinois', country: 'US', cities: 'Suburban Chicago' }, '848': { region: 'New Jersey', country: 'US', cities: 'New Brunswick' }, '850': { region: 'Florida', country: 'US', cities: 'Tallahassee, Pensacola' }, '856': { region: 'New Jersey', country: 'US', cities: 'Camden, Cherry Hill' }, '857': { region: 'Massachusetts', country: 'US', cities: 'Boston' }, '858': { region: 'California', country: 'US', cities: 'San Diego' }, '859': { region: 'Kentucky', country: 'US', cities: 'Lexington' }, '860': { region: 'Connecticut', country: 'US', cities: 'Hartford' }, '862': { region: 'New Jersey', country: 'US', cities: 'Newark' }, '863': { region: 'Florida', country: 'US', cities: 'Lakeland' }, '864': { region: 'South Carolina', country: 'US', cities: 'Greenville' }, '865': { region: 'Tennessee', country: 'US', cities: 'Knoxville' }, '870': { region: 'Arkansas', country: 'US', cities: 'Jonesboro' }, '872': { region: 'Illinois', country: 'US', cities: 'Chicago' }, '878': { region: 'Pennsylvania', country: 'US', cities: 'Pittsburgh' }, '901': { region: 'Tennessee', country: 'US', cities: 'Memphis' }, '903': { region: 'Texas', country: 'US', cities: 'Tyler, Longview' }, '904': { region: 'Florida', country: 'US', cities: 'Jacksonville' }, '906': { region: 'Michigan', country: 'US', cities: 'Upper Peninsula' }, '907': { region: 'Alaska', country: 'US', cities: 'All Regions' }, '908': { region: 'New Jersey', country: 'US', cities: 'Elizabeth' }, '909': { region: 'California', country: 'US', cities: 'San Bernardino' }, '910': { region: 'North Carolina', country: 'US', cities: 'Wilmington, Fayetteville' }, '912': { region: 'Georgia', country: 'US', cities: 'Savannah' }, '913': { region: 'Kansas', country: 'US', cities: 'Kansas City' }, '914': { region: 'New York', country: 'US', cities: 'White Plains, Yonkers' }, '915': { region: 'Texas', country: 'US', cities: 'El Paso' }, '916': { region: 'California', country: 'US', cities: 'Sacramento' }, '917': { region: 'New York', country: 'US', cities: 'New York City' }, '918': { region: 'Oklahoma', country: 'US', cities: 'Tulsa' }, '919': { region: 'North Carolina', country: 'US', cities: 'Raleigh, Durham' }, '920': { region: 'Wisconsin', country: 'US', cities: 'Green Bay' }, '925': { region: 'California', country: 'US', cities: 'Concord, Walnut Creek' }, '928': { region: 'Arizona', country: 'US', cities: 'Flagstaff, Yuma' }, '929': { region: 'New York', country: 'US', cities: 'New York City' }, '931': { region: 'Tennessee', country: 'US', cities: 'Clarksville' }, '934': { region: 'New York', country: 'US', cities: 'Long Island' }, '936': { region: 'Texas', country: 'US', cities: 'Huntsville' }, '937': { region: 'Ohio', country: 'US', cities: 'Dayton' }, '940': { region: 'Texas', country: 'US', cities: 'Denton' }, '941': { region: 'Florida', country: 'US', cities: 'Sarasota, Bradenton' }, '947': { region: 'Michigan', country: 'US', cities: 'Troy' }, '949': { region: 'California', country: 'US', cities: 'Irvine' }, '951': { region: 'California', country: 'US', cities: 'Riverside' }, '952': { region: 'Minnesota', country: 'US', cities: 'Bloomington' }, '954': { region: 'Florida', country: 'US', cities: 'Fort Lauderdale' }, '956': { region: 'Texas', country: 'US', cities: 'Laredo, Brownsville' }, '959': { region: 'Connecticut', country: 'US', cities: 'Hartford' }, '970': { region: 'Colorado', country: 'US', cities: 'Fort Collins, Grand Junction' }, '971': { region: 'Oregon', country: 'US', cities: 'Portland' }, '972': { region: 'Texas', country: 'US', cities: 'Dallas' }, '973': { region: 'New Jersey', country: 'US', cities: 'Newark, Paterson' }, '978': { region: 'Massachusetts', country: 'US', cities: 'Lowell' }, '979': { region: 'Texas', country: 'US', cities: 'College Station' }, '980': { region: 'North Carolina', country: 'US', cities: 'Charlotte' }, '984': { region: 'North Carolina', country: 'US', cities: 'Raleigh' }, '985': { region: 'Louisiana', country: 'US', cities: 'Houma, Slidell' }, '986': { region: 'Idaho', country: 'US', cities: 'All Regions' }, '989': { region: 'Michigan', country: 'US', cities: 'Saginaw' },
// Canadian Area Codes '204': { region: 'Manitoba', country: 'CA', cities: 'Winnipeg' }, '226': { region: 'Ontario', country: 'CA', cities: 'London, Windsor' }, '236': { region: 'British Columbia', country: 'CA', cities: 'Vancouver, Victoria' }, '249': { region: 'Ontario', country: 'CA', cities: 'Sudbury, Sault Ste. Marie' }, '250': { region: 'British Columbia', country: 'CA', cities: 'Victoria, Kelowna' }, '263': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '289': { region: 'Ontario', country: 'CA', cities: 'Hamilton, Niagara' }, '306': { region: 'Saskatchewan', country: 'CA', cities: 'Saskatoon, Regina' }, '343': { region: 'Ontario', country: 'CA', cities: 'Ottawa' }, '354': { region: 'Quebec', country: 'CA', cities: 'Granby' }, '365': { region: 'Ontario', country: 'CA', cities: 'Hamilton' }, '367': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '368': { region: 'Alberta', country: 'CA', cities: 'Calgary' }, '403': { region: 'Alberta', country: 'CA', cities: 'Calgary' }, '416': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '418': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '431': { region: 'Manitoba', country: 'CA', cities: 'Winnipeg' }, '437': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '438': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '450': { region: 'Quebec', country: 'CA', cities: 'Laval, Longueuil' }, '506': { region: 'New Brunswick', country: 'CA', cities: 'All Regions' }, '514': { region: 'Quebec', country: 'CA', cities: 'Montreal' }, '519': { region: 'Ontario', country: 'CA', cities: 'London, Windsor' }, '548': { region: 'Ontario', country: 'CA', cities: 'Southwestern Ontario' }, '579': { region: 'Quebec', country: 'CA', cities: 'Outer Montreal' }, '581': { region: 'Quebec', country: 'CA', cities: 'Quebec City' }, '587': { region: 'Alberta', country: 'CA', cities: 'Calgary, Edmonton' }, '604': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '613': { region: 'Ontario', country: 'CA', cities: 'Ottawa, Kingston' }, '639': { region: 'Saskatchewan', country: 'CA', cities: 'All Regions' }, '647': { region: 'Ontario', country: 'CA', cities: 'Toronto' }, '672': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '705': { region: 'Ontario', country: 'CA', cities: 'Sudbury, Barrie' }, '709': { region: 'Newfoundland and Labrador', country: 'CA', cities: 'St. John\'s' }, '753': { region: 'Ontario', country: 'CA', cities: 'Ottawa' }, '778': { region: 'British Columbia', country: 'CA', cities: 'Vancouver' }, '780': { region: 'Alberta', country: 'CA', cities: 'Edmonton' }, '782': { region: 'Nova Scotia/PEI', country: 'CA', cities: 'Halifax, Charlottetown' }, '807': { region: 'Ontario', country: 'CA', cities: 'Thunder Bay' }, '819': { region: 'Quebec', country: 'CA', cities: 'Gatineau, Sherbrooke' }, '825': { region: 'Alberta', country: 'CA', cities: 'Calgary, Edmonton' }, '867': { region: 'Northern Canada', country: 'CA', cities: 'Yukon, NWT, Nunavut' }, '873': { region: 'Quebec', country: 'CA', cities: 'Gatineau' }, '902': { region: 'Nova Scotia/PEI', country: 'CA', cities: 'Halifax, Charlottetown' }, '905': { region: 'Ontario', country: 'CA', cities: 'Hamilton, Mississauga' },
// Caribbean / Other NANP '242': { region: 'Bahamas', country: 'BS', cities: 'Nassau' }, '246': { region: 'Barbados', country: 'BB', cities: 'Bridgetown' }, '264': { region: 'Anguilla', country: 'AI', cities: 'The Valley' }, '268': { region: 'Antigua and Barbuda', country: 'AG', cities: 'St. John\'s' }, '284': { region: 'British Virgin Islands', country: 'VG', cities: 'Road Town' }, '340': { region: 'US Virgin Islands', country: 'VI', cities: 'Charlotte Amalie' }, '345': { region: 'Cayman Islands', country: 'KY', cities: 'George Town' }, '441': { region: 'Bermuda', country: 'BM', cities: 'Hamilton' }, '473': { region: 'Grenada', country: 'GD', cities: 'St. George\'s' }, '649': { region: 'Turks and Caicos', country: 'TC', cities: 'Cockburn Town' }, '658': { region: 'Jamaica', country: 'JM', cities: 'Kingston' }, '664': { region: 'Montserrat', country: 'MS', cities: 'Brades' }, '670': { region: 'Northern Mariana Islands', country: 'MP', cities: 'Saipan' }, '671': { region: 'Guam', country: 'GU', cities: 'Hagåtña' }, '684': { region: 'American Samoa', country: 'AS', cities: 'Pago Pago' }, '721': { region: 'Sint Maarten', country: 'SX', cities: 'Philipsburg' }, '758': { region: 'Saint Lucia', country: 'LC', cities: 'Castries' }, '767': { region: 'Dominica', country: 'DM', cities: 'Roseau' }, '784': { region: 'St. Vincent & Grenadines', country: 'VC', cities: 'Kingstown' }, '787': { region: 'Puerto Rico', country: 'PR', cities: 'San Juan' }, '809': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '829': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '849': { region: 'Dominican Republic', country: 'DO', cities: 'Santo Domingo' }, '868': { region: 'Trinidad and Tobago', country: 'TT', cities: 'Port of Spain' }, '869': { region: 'St. Kitts and Nevis', country: 'KN', cities: 'Basseterre' }, '876': { region: 'Jamaica', country: 'JM', cities: 'Kingston' }, '939': { region: 'Puerto Rico', country: 'PR', cities: 'San Juan' }, };
const CountryBadge = ({ code }) => { const colors = { US: 'bg-blue-100 text-blue-800 border-blue-200', CA: 'bg-red-100 text-red-800 border-red-200', BS: 'bg-teal-100 text-teal-800 border-teal-200', BB: 'bg-yellow-100 text-yellow-800 border-yellow-200', PR: 'bg-purple-100 text-purple-800 border-purple-200', JM: 'bg-green-100 text-green-800 border-green-200', DO: 'bg-orange-100 text-orange-800 border-orange-200', DEFAULT: 'bg-gray-100 text-gray-800 border-gray-200' }; const names = { US: 'United States', CA: 'Canada', BS: 'Bahamas', BB: 'Barbados', PR: 'Puerto Rico', JM: 'Jamaica', DO: 'Dominican Republic', VI: 'US Virgin Islands', BM: 'Bermuda' };
const colorClass = colors[code] || colors.DEFAULT; const name = names[code] || code;
return ( <span className={`px-3 py-1 rounded-full text-xs font-semibold border ${colorClass} inline-flex items-center gap-1`}> <Globe className="w-3 h-3" /> {name} </span> ); };
export default function App() { const [input, setInput] = useState(''); const [parsedData, setParsedData] = useState(null); const [areaCode, setAreaCode] = useState('');
// Format phone number as (XXX) XXX-XXXX const formatPhoneNumber = (value) => { if (!value) return value; const phoneNumber = value.replace(/[^\d]/g, ''); const phoneNumberLength = phoneNumber.length; if (phoneNumberLength < 4) return phoneNumber; if (phoneNumberLength < 7) { return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`; } return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`; };
const handleInputChange = (e) => { const rawValue = e.target.value; // Allow deleting by checking if new length is shorter if (rawValue.length < input.length) { setInput(rawValue); // Recalculate logic for deletion const cleaned = rawValue.replace(/\D/g, ''); if (cleaned.length >= 3) { const ac = cleaned.substring(0, 3); setAreaCode(ac); setParsedData(AREA_CODE_DATA[ac] || null); } else { setAreaCode(''); setParsedData(null); } return; }
const formatted = formatPhoneNumber(rawValue); setInput(formatted);
const cleaned = formatted.replace(/\D/g, ''); if (cleaned.length >= 3) { const ac = cleaned.substring(0, 3); setAreaCode(ac); setParsedData(AREA_CODE_DATA[ac] || null); } else { setAreaCode(''); setParsedData(null); } };
return ( <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-900"> <div className="max-w-md w-full bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100"> {/* Header */} <div className="bg-indigo-600 p-6 text-white text-center relative overflow-hidden"> <div className="absolute top-0 left-0 w-full h-full opacity-10"> <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0 100 C 20 0 50 0 100 100 Z" fill="white" /> </svg> </div> <div className="relative z-10 flex flex-col items-center"> <div className="bg-white/20 p-3 rounded-full mb-3 backdrop-blur-sm"> <MapPin className="w-8 h-8 text-white" /> </div> <h1 className="text-2xl font-bold">Area Code Finder</h1> <p className="text-indigo-100 text-sm mt-1">Identify North American Locations</p> </div> </div>
{/* Body */} <div className="p-6 space-y-6"> {/* Input Section */} <div className="space-y-2"> <label className="block text-sm font-medium text-slate-600 ml-1"> Enter Phone Number </label> <div className="relative group"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Phone className="h-5 w-5 text-slate-400 group-focus-within:text-indigo-500 transition-colors" /> </div> <input type="text" value={input} onChange={handleInputChange} placeholder="(555) 123-4567" className="block w-full pl-10 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-xl text-lg font-medium placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all shadow-sm" maxLength={14} /> </div> <p className="text-xs text-slate-400 ml-1"> Supports US, Canada, and Caribbean numbers (+1) </p> </div>
{/* Results Section */} <div className="min-h-[180px]"> {areaCode.length === 3 ? ( parsedData ? ( <div className="bg-white border border-slate-100 rounded-2xl shadow-sm p-5 space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300"> <div className="flex justify-between items-start"> <div> <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Region</p> <h2 className="text-2xl font-bold text-slate-800 leading-tight">{parsedData.region}</h2> </div> <div className="flex flex-col items-end"> <div className="text-3xl font-black text-indigo-100 select-none">{areaCode}</div> </div> </div>
<div className="flex items-center gap-2"> <CountryBadge code={parsedData.country} /> </div> <div className="pt-4 border-t border-slate-50"> <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1"> <Info className="w-3 h-3" /> Major Cities / Areas </p> <p className="text-sm text-slate-600 leading-relaxed"> {parsedData.cities} </p> </div> </div> ) : ( <div className="bg-red-50 border border-red-100 rounded-2xl p-5 text-center animate-in fade-in zoom-in duration-300"> <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3"> <Search className="w-6 h-6 text-red-500" /> </div> <h3 className="text-red-900 font-semibold">Unknown Area Code</h3> <p className="text-red-600/80 text-sm mt-1"> Area code <span className="font-mono font-bold">{areaCode}</span> was not found in our database. </p> </div> ) ) : ( <div className="h-full flex flex-col items-center justify-center text-center p-6 text-slate-300 border-2 border-dashed border-slate-100 rounded-2xl"> <Hash className="w-12 h-12 mb-3 opacity-50" /> <p className="text-sm font-medium text-slate-400">Start typing a number...</p> <p className="text-xs mt-1">We'll detect the location automatically.</p> </div> )} </div> </div>
{/* Footer */} <div className="bg-slate-50 px-6 py-4 border-t border-slate-100 text-center"> <p className="text-xs text-slate-400"> Data based on the North American Numbering Plan (NANP). </p> </div>
</div> </div> ); }