RPi Mounts redesigned

Author: brankko

src/components/ModuleFace.tsx

@@ -35,7 +35,7 @@ export const ModuleFace = ({
             {!hasImage && (
                 <div className="flex flex-col items-center opacity-80 pointer-events-none w-full px-4">
                     <span className="font-mono text-xs uppercase tracking-widest text-white/50 mb-1">
-                        {module.name.substring(0, 18)}
+                        {module.name.substring(0, 32)}
                     </span>
 
                     {/* Visual Features based on Type */}

src/components/module-faces/AccessoryFace.tsx

@@ -28,7 +28,7 @@ export const AccessoryFace = ({
     }
 
     if (id === 'rpi-mount' || name.includes('raspberry') || name.includes('rpi')) {
-        return <RPIMountFace />;
+        return <RPIMountFace rackWidth={rackWidth} uSize={module.uSize} />;
     }
 
     // Default to Vent if it seems like a vent, or if generic accessory

src/components/module-faces/accessory/RPIMountFace.tsx

@@ -1,14 +1,31 @@
+import { type RackWidth } from '../../../types';
+import { RPIMountSlot } from './RPIMountSlot';
+
+export const RPIMountFace = ({
+    rackWidth,
+    uSize = 1,
+}: {
+    rackWidth?: RackWidth;
+    uSize?: number;
+}) => {
+    const is10Inch = rackWidth === '10inch';
+    const is2U = uSize === 2;
+
+    // Slot count logic
+    let slotCount;
+    if (is2U) {
+        slotCount = is10Inch ? 4 : 10;
+    } else {
+        slotCount = is10Inch ? 2 : 4;
+    }
 
-export const RPIMountFace = () => {
     return (
-        <div className="w-full h-full flex items-center justify-center gap-4">
-            {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="w-8 h-full bg-green-900/40 border border-green-800 mx-1 flex flex-col items-center justify-center relative">
-                    {/* Fake RPi PCB */}
-                    <div className="w-6 h-[80%] bg-emerald-700/80 border border-emerald-600 rounded-sm shadow-md"></div>
-                    <div className="absolute top-2 w-4 h-4 bg-gray-400 rounded-sm"></div> {/* USB/Ethernet */}
-                </div>
-            ))}
+        <div className="w-full h-full flex flex-col items-center justify-center py-2">
+            <div className="flex gap-2 items-center justify-center w-full px-2">
+                {Array.from({ length: slotCount }).map((_, i) => (
+                    <RPIMountSlot key={i} vertical={is2U} />
+                ))}
+            </div>
         </div>
     );
 };

src/components/module-faces/accessory/RPIMountSlot.tsx

@@ -0,0 +1,13 @@
+export const RPIMountSlot = ({ vertical = false }: { vertical?: boolean }) => {
+    return (
+        <div
+            className={`${vertical
+                ? 'w-[70px] h-[130px] flex-col py-3'
+                : 'w-[150px] h-[45px] flex-row px-3'
+                } border-[1px] border-white/20 rounded-md bg-transparent flex items-center justify-between`}
+        >
+            <div className="w-2 h-2 rounded-full border border-white/20 bg-transparent" />
+            <div className="w-2 h-2 rounded-full border border-white/20 bg-transparent" />
+        </div>
+    );
+};

src/data/modules.ts

@@ -49,9 +49,16 @@ export const PREDEFINED_MODULES: RackModule[] = [
     { id: 'shelf', name: 'Shelf', uSize: 1, type: 'accessory', color: 'bg-slate-800' },
     {
         id: 'rpi-mount',
-        name: 'Raspberry Pi Mount',
+        name: '1U Raspberry Pi Mount',
         uSize: 1,
         type: 'accessory',
-        color: 'bg-emerald-900',
+        color: 'bg-slate-900',
+    },
+    {
+        id: 'rpi-mount-2u',
+        name: '2U Raspberry Pi Mount',
+        uSize: 2,
+        type: 'accessory',
+        color: 'bg-slate-900',
     },
 ];