Closed daniloab closed 1 year ago
import React from 'react'; const services = [ { id: 1, personalName: 'John Doe', block: 'A', ap: 101, serviceCategory: 'Plumbing', value: 50, }, { id: 2, personalName: 'Jane Smith', block: 'B', ap: 202, serviceCategory: 'Electrician', value: 75, }, // Add more services here ]; const ServiceList = () => { return ( <div className="container mx-auto"> <h1 className="text-2xl font-bold mb-4">Service List</h1> <table className="min-w-full divide-y divide-gray-200"> <thead> <tr> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Personal Name </th> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Block </th> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Apartment </th> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Service Category </th> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Value </th> <th className="px-6 py-3 bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Actions </th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {services.map((service) => ( <tr key={service.id}> <td className="px-6 py-4 whitespace-nowrap">{service.personalName}</td> <td className="px-6 py-4 whitespace-nowrap">{service.block}</td> <td className="px-6 py-4 whitespace-nowrap">{service.ap}</td> <td className="px-6 py-4 whitespace-nowrap">{service.serviceCategory}</td> <td className="px-6 py-4 whitespace-nowrap">{service.value}</td> <td className="px-6 py-4 whitespace-nowrap"> <button className="text-blue-600">Edit</button> <button className="text-red-600">Remove</button> </td> </tr> ))} </tbody> </table> </div> ); }; export default ServiceList;