Truck Card - Copy this React, Tailwind Component to your project
Create a card component to display the details of a truck and its associated tanks (up to 2 tanks). 🏷️ Card Layout: Each card should display the following information: Truck Details (Camión): Numérico de Económico: Display the truck's economic number (numEconomico). Marca: Display the truck's brand (marca). Modelo: Display the truck's model (modelo). Año: Display the truck's year (year). Estado: Display the truck's state (estado). Use a color indicator (e.g., green for active, red for inactive). Placas (optional): Display the truck's plates (placas) if available. Volumen (m3, optional): Display the truck's capacity in cubic meters (m3) if available. Tipo de Tanque (optional): Display the type of tank (tipoTanque) if available. Activa (optional): Display whether the truck is active (activo), if available. Área (optional): Display the associated work area (area), if available. Tank Information (1 to 2 tanks): Each truck can have 1 to 2 tanks associated with it. For each tank: Marca: Display the tank's brand (marca). Modelo: Display the tank's model (modelo). Año: Display the tank's year (year). Serie (optional): Display the tank's series (serie) if available. Placas (optional): Display the tank's plates (placas) if available. Other Information (Optional): Mantenimiento (Maintenance): Show related maintenance data if available. Revisiones (Inspections): Show inspection details if available. Evidencia (Evidence): Display associated evidence if available. Visual Style: Card Design: Clean, with distinct sections for truck and tank information. Tank Section: Each tank should be displayed in a smaller box inside the card. Color Scheme: Use professional, subtle colors (blues, grays, and greens) to distinguish the truck and tank sections. Icons: Optional icons for each section (e.g., a wrench for maintenance, a checklist for inspections). Expandable: The card should be expandable to show more details (e.g., maintenance, inspections, evidence) when clicked. Optional Sections: Hover Effects: On hover, the card can show more details like the truck's status or maintenance schedule. Action Buttons: Include action buttons such as "View Details" or "Edit" to provide additional functionality for managing the truck and tanks. ⚙️ Technical Details: Recommended Framework: React (or another modern front end framework). Responsiveness: The card should adapt to both mobile and desktop views. Interactivity: The card should allow expansion on click to show more details. Data Display: Display the information clearly, prioritizing essential data like the truck's status, brand, and model. ✅ Expected Result: A professional and responsive card layout for trucks, with a clean and organized display of key data. Tank information clearly displayed, with expandable sections for additional details.
