Default Component - Copy this React, Tailwind Component to your project

when i click on generate new salry slip it will generate a salary slip , this code should be generate import React, { useState } from "react"; import { FaPrint, FaDownload, FaBuilding } from "react-icons/fa"; const SalarySlipGenerator = () => { const [employeeData] = useState({ companyName: "Tech Solutions Inc.", companyAddress: "123 Business Park, Silicon Valley, CA 94025", employeeName: "John Doe", employeeId: "EMP001", designation: "Senior Software Engineer", department: "Engineering", joiningDate: "2022-01-15", payPeriod: "March 2024", earnings: { basicSalary: 85000, hra: 25500, da: 8500, conveyanceAllowance: 5000, otherAllowances: 7500 }, deductions: { pf: 10200, professionalTax: 2500, incomeTax: 15000, otherDeductions: 3000 } }); const calculateTotal = (obj) => { return Object.values(obj).reduce((acc, curr) => acc + curr, 0); }; const totalEarnings = calculateTotal(employeeData.earnings); const totalDeductions = calculateTotal(employeeData.deductions); const netSalary = totalEarnings - totalDeductions; const handlePrint = () => { window.print(); }; const handleDownload = () => { // PDF download logic here console.log("Downloading PDF..."); }; return ( <div className="min-h-screen bg-gray-100 p-8"> <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden print:shadow-none"> {/* Header Actions */} <div className="print:hidden p-4 bg-gray-50 flex justify-end space-x-4"> <button onClick={handlePrint} className="flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition" > <FaPrint className="mr-2" /> Print </button> <button onClick={handleDownload} className="flex items-center px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition" > <FaDownload className="mr-2" /> Download PDF </button> </div> {/* Company Header */} <div className="p-6 border-b border-gray-200"> <div className="flex items-center justify-between"> <div className="flex items-center"> <div className="p-3 bg-gray-100 rounded-full"> <FaBuilding className="text-3xl text-gray-600" /> </div> <div className="ml-4"> <h1 className="text-2xl font-bold text-gray-800">{employeeData.companyName}</h1> <p className="text-gray-600">{employeeData.companyAddress}</p> </div> </div> <div className="text-right"> <h2 className="text-xl font-bold text-blue-600">SALARY SLIP</h2> <p className="text-gray-600">{employeeData.payPeriod}</p> </div> </div> </div> {/* Employee Details */} <div className="grid grid-cols-2 gap-6 p-6 border-b border-gray-200"> <div> <h3 className="text-lg font-semibold mb-4">Employee Information</h3> <div className="space-y-2"> <p><span className="font-medium">Name:</span> {employeeData.employeeName}</p> <p><span className="font-medium">Employee ID:</span> {employeeData.employeeId}</p> <p><span className="font-medium">Designation:</span> {employeeData.designation}</p> </div> </div> <div> <div className="space-y-2"> <p><span className="font-medium">Department:</span> {employeeData.department}</p> <p><span className="font-medium">Date of Joining:</span> {employeeData.joiningDate}</p> <p><span className="font-medium">Pay Period:</span> {employeeData.payPeriod}</p> </div> </div> </div> {/* Salary Details */} <div className="grid grid-cols-2 gap-6 p-6"> {/* Earnings */} <div> <h3 className="text-lg font-semibold mb-4">Earnings</h3> <div className="space-y-2"> <div className="flex justify-between"> <span>Basic Salary</span> <span>${employeeData.earnings.basicSalary}</span> </div> <div className="flex justify-between"> <span>HRA</span> <span>${employeeData.earnings.hra}</span> </div> <div className="flex justify-between"> <span>DA</span> <span>${employeeData.earnings.da}</span> </div> <div className="flex justify-between"> <span>Conveyance Allowance</span> <span>${employeeData.earnings.conveyanceAllowance}</span> </div> <div className="flex justify-between"> <span>Other Allowances</span> <span>${employeeData.earnings.otherAllowances}</span> </div> <div className="flex justify-between font-semibold pt-2 border-t"> <span>Total Earnings</span> <span>${totalEarnings}</span> </div> </div> </div> {/* Deductions */} <div> <h3 className="text-lg font-semibold mb-4">Deductions</h3> <div className="space-y-2"> <div className="flex justify-between"> <span>Provident Fund</span> <span>${employeeData.deductions.pf}</span> </div> <div className="flex justify-between"> <span>Professional Tax</span> <span>${employeeData.deductions.professionalTax}</span> </div> <div className="flex justify-between"> <span>Income Tax</span> <span>${employeeData.deductions.incomeTax}</span> </div> <div className="flex justify-between"> <span>Other Deductions</span> <span>${employeeData.deductions.otherDeductions}</span> </div> <div className="flex justify-between font-semibold pt-2 border-t"> <span>Total Deductions</span> <span>${totalDeductions}</span> </div> </div> </div> </div> {/* Net Salary */} <div className="p-6 bg-gray-50 border-t border-gray-200"> <div className="flex justify-between items-center"> <div> <h3 className="text-xl font-bold">Net Salary</h3> <p className="text-gray-600 text-sm">Total Earnings - Total Deductions</p> </div> <div className="text-right"> <span className="text-2xl font-bold text-blue-600">${netSalary}</span> </div> </div> </div> {/* Footer */} <div className="p-6 border-t border-gray-200"> <div className="grid grid-cols-2 gap-6 mt-8"> <div className="text-center"> <div className="border-t border-gray-300 pt-2"> <p className="font-medium">Employee Signature</p> </div> </div> <div className="text-center"> <div className="border-t border-gray-300 pt-2"> <p className="font-medium">Authorized Signatory</p> </div> </div> </div> </div> </div> </div> ); }; export default SalarySlipGenerator;