import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
function App() {
const [ifsc, setIfsc] = useState("");
const [details, setDetails] = useState(null);
const [error, setError] = useState("");
const fetchIFSCDetails = async () => {
setError("");
setDetails(null);
try {
const res = await fetch(`https://ifsc.razorpay.com/${ifsc.toUpperCase()}`);
if (!res.ok) throw new Error("Invalid IFSC code or not found");
const data = await res.json();
setDetails(data);
} catch (err) {
setError(err.message);
}
};
return (
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
<div className="bg-white p-6 rounded-2xl shadow-md w-full max-w-md space-y-4">
<h1 className="text-2xl font-bold text-center">Find IFSC Code</h1>
<Input
type="text"
placeholder="Enter IFSC code (e.g. HDFC0000001)"
value={ifsc}
onChange={(e) => setIfsc(e.target.value)}
/>
<Button onClick={fetchIFSCDetails}>Search</Button>
{error && <p className="text-red-500 text-sm">{error}</p>}
{details && (
<div className="bg-gray-50 p-4 rounded-xl mt-4 text-sm">
<p><strong>Bank:</strong> {details.BANK}</p>
<p><strong>Branch:</strong> {details.BRANCH}</p>
<p><strong>Address:</strong> {details.ADDRESS}</p>
<p><strong>City:</strong> {details.CITY}</p>
<p><strong>District:</strong> {details.DISTRICT}</p>
<p><strong>State:</strong> {details.STATE}</p>
</div>
)}
</div>
</div>
);
}
export default App;