From 2686ca46978b2636656c117c3f2f20223a41efff Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 03:53:49 -0500
Subject: [PATCH] refactor: enhance peripheral display to support multiple
 types and improve readability

---
 client/src/components/ControlPanel.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ControlPanel.jsx b/client/src/components/ControlPanel.jsx
index d09f00c..9745799 100644
--- a/client/src/components/ControlPanel.jsx
+++ b/client/src/components/ControlPanel.jsx
@@ -234,10 +234,12 @@ function TurtleDetails({ turtle }) {
         <div className="detail-section">
           <h3>Peripherals</h3>
           <div className="status-grid">
-            {Object.entries(turtle.peripherals).map(([side, type]) => (
+            {Object.entries(turtle.peripherals).map(([side, info]) => (
               <div key={side} className="status-item">
                 <span className="label" style={{ textTransform: 'capitalize' }}>{side}:</span>
-                <span className="value" style={{ color: '#ff55ff' }}>{type}</span>
+                <span className="value" style={{ color: '#ff55ff' }}>
+                  {typeof info === 'string' ? info : (info?.types?.join(', ') || 'unknown')}
+                </span>
               </div>
             ))}
           </div>