Aite Yard List - Copy this React, Tailwind Component to your project

/* Create AiteYardList base on AiteTantouList: ***AiteYardList's initData: [ { id: number, 取引先のヤードID (PK) default = null kaisha_id: number, 取引先ID (FK) default = null name_jpn: string, ヤード名 (日本語) default = null name_eng: string, ヤード名 (英語) default = null postalcode: string, 郵便番号 default = null kenmei_jpn: string, 県名 (日本語) default = null, required kenmei_eng: string, 県名 (英語) default = null, required address_jpn: string, 住所 (日本語) default = null address_eng: string, 住所 (英語) default = null tel: string, TEL default = null mobile: string, 携帯 default = null fax: string, FAX default = null bikou: string, 備考 default = null is_home_garage: boolean, 自社ガレージ default = false open_time: string, 営業時間 default = null close_time: string, 閉店時間 default = null working_mon: boolean 月曜営業 default = true working_tue: boolean 火曜営業 default = true working_wed: boolean 水曜営業 default = true working_thu: boolean 木曜営業 default = true working_fri: boolean 金曜営業 default = true working_sat: boolean 土曜営業 default = true working_sun: boolean 日曜営業 default = false working_holiday: boolean 祝日営業 default = false suspended: boolean 取引終了 default = false }, ... ] *** Create a yard list from the input data. const AiteYardList = (initData, onEdit, onDelete) => {...} *** If no data, display text "No data" *** Components for each contact in array: name_jpn, name_eng postalcode, address_jpn, address_eng kenmei_jpn, kenmei_eng tel mobile fax email bikou is_home_garage open_time, close_time working_mon, working_tue, working_wed, working_thu, working_fri, working_sat, working_sun, working_holiday suspended *** Styles: max w = 800px flex column, each row display only 1 yard data *** AiteTantouList sample: import React, { useEffect, useState } from "react"; import { FiEdit2, FiTrash2, FiPhone, FiMail, FiPrinter, FiSmartphone, FiFileText } from "react icons/fi"; import { useAppContext } from "../app_context.js"; const AiteTantouList = ({ initData, onUpdate, isLoading }) => { const { appLanguage, addAppMessage } = useAppContext(); const { aite_kaisha_master: langPack } = appLanguage.langPack.layouts; const [records, setRecords] = useState([]); useEffect(() => { // Ensure initData is an array before setting it to records setRecords(Array.isArray(initData) ? initData : []); }, [initData]); const handleDelete = (id) => { const newRecords = records.filter((record) => record.id !== id); setRecords(newRecords); onUpdate(newRecords); }; const handleEdit = (id) => { addAppMessage('info', JSON.stringify(records.find((record) => record.id === id))); }; if (!records || records.length === 0) { return ( <div className="flex items center justify center h 64 bg gray 50 rounded lg"> <p className="text gray 500 text lg">{langPack.no_data}</p> </div> ); } return ( <div className="w full mx auto p 2 space y 2 flex flex col items center justify center"> <h2 className="text 2xl font semibold text gray 800 mb 2">{langPack.tantou_list_title}</h2> <div className="grid gap 4 md:grid cols 2 lg:grid cols 3"> {records.map((record) => ( <div key={record.id} className="bg white rounded xl shadow md hover:shadow lg transition shadow duration 300 p 6 space y 4" > <div className="flex justify between items start"> <div> <h3 className="text xl font semibold text gray 800">{record.name}</h3> <p className="text gray 600">{record.yaku}</p> </div> <div className="flex space x 2"> <button disabled={isLoading} onClick={() => handleEdit(record.id)} className="p 2 text blue 600 hover:bg blue 50 rounded full transition colors duration 200" aria label="Edit record" > <FiEdit2 className="w 5 h 5" /> </button> <button disabled={isLoading} onClick={() => handleDelete(record.id)} className="p 2 text red 600 hover:bg red 50 rounded full transition colors duration 200" aria label="Delete record" > <FiTrash2 className="w 5 h 5" /> </button> </div> </div> <div className="space y 3"> <div className="flex items center space x 2 text gray 600"> <FiPhone className="w 5 h 5" /> <span>{record.tel}</span> </div> <div className="flex items center space x 2 text gray 600"> <FiSmartphone className="w 5 h 5" /> <span>{record.mobile}</span> </div> <div className="flex items center space x 2 text gray 600"> <FiPrinter className="w 5 h 5" /> <span>{record.fax}</span> </div> <div className="flex items center space x 2 text gray 600"> <FiMail className="w 5 h 5" /> <span className="break all">{record.email}</span> </div> <div className="flex items start space x 2 text gray 600"> <FiFileText className="w 5 h 5 mt 1" /> <p className="break words">{record.bikou}</p> </div> </div> </div> ))} </div> </div> ); }; export default AiteTantouList; */