arma-servidor-01
import React, { useState, useEffect } from 'react';
import {
Server,
Cpu,
MemoryStick,
HardDrive,
CheckCircle,
ShoppingCart,
AlertCircle,
ChevronRight,
RotateCcw,
Zap,
ShieldCheck,
Truck
} from 'lucide-react';
// --- DATA SIMULATION FROM COMPATIBILITY MATRIX ---
// Simulating the rules extracted from a standard server matrix
const COMPATIBILITY_DATA = {
motherboards: [
{
id: 'mb-1',
name: 'HPE ProLiant DL380 Gen10',
socket: 'LGA3647',
ramType: 'DDR4',
maxRamSlots: 24,
formFactor: '2U',
img: 'https://images.unsplash.com/photo-1558494949-ef526b0042a0?auto=format&fit=crop&q=80&w=200&h=150',
price: 1850
},
{
id: 'mb-2',
name: 'Dell PowerEdge R750',
socket: 'LGA4189',
ramType: 'DDR4',
maxRamSlots: 32,
formFactor: '2U',
img: 'https://images.unsplash.com/photo-1591405351990-4726e331f141?auto=format&fit=crop&q=80&w=200&h=150',
price: 2100
},
{
id: 'mb-3',
name: 'Supermicro A+ Server',
socket: 'SP3',
ramType: 'DDR4',
maxRamSlots: 32,
formFactor: '1U',
img: 'https://images.unsplash.com/photo-1531736275454-adc48d079cd9?auto=format&fit=crop&q=80&w=200&h=150',
price: 1450
},
],
cpus: [
{ id: 'cpu-1', name: 'Intel Xeon Gold 6248R', socket: 'LGA3647', cores: 24, speed: '3.0GHz', price: 2800 },
{ id: 'cpu-2', name: 'Intel Xeon Silver 4210R', socket: 'LGA3647', cores: 10, speed: '2.4GHz', price: 650 },
{ id: 'cpu-3', name: 'Intel Xeon Platinum 8380', socket: 'LGA4189', cores: 40, speed: '2.3GHz', price: 8900 },
{ id: 'cpu-4', name: 'Intel Xeon Gold 6330', socket: 'LGA4189', cores: 28, speed: '2.0GHz', price: 1950 },
{ id: 'cpu-5', name: 'AMD EPYC 7763', socket: 'SP3', cores: 64, speed: '2.45GHz', price: 7890 },
{ id: 'cpu-6', name: 'AMD EPYC 7543', socket: 'SP3', cores: 32, speed: '2.8GHz', price: 3400 },
],
ram: [
{ id: 'ram-1', name: '16GB DDR4-2933 ECC', type: 'DDR4', price: 180 },
{ id: 'ram-2', name: '32GB DDR4-2933 ECC', type: 'DDR4', price: 320 },
{ id: 'ram-3', name: '64GB DDR4-3200 ECC', type: 'DDR4', price: 580 },
{ id: 'ram-4', name: '128GB DDR4-3200 3DS ECC', type: 'DDR4', price: 1250 },
],
storage: [
{ id: 'st-1', name: '480GB SATA SSD Read Intensive', interface: 'SATA', price: 210 },
{ id: 'st-2', name: '960GB SAS SSD Mixed Use', interface: 'SAS', price: 450 },
{ id: 'st-3', name: '1.92TB NVMe SSD', interface: 'NVMe', price: 780 },
{ id: 'st-4', name: '3.84TB SAS SSD Read Intensive', interface: 'SAS', price: 1100 },
{ id: 'st-5', name: '8TB 7.2K SATA HDD', interface: 'SATA', price: 290 },
]
};
// --- HELPER COMPONENTS ---
const StepIndicator = ({ currentStep, steps }) => (
{steps.map((step, index) => (
))}
);
const ProductCard = ({ item, isSelected, onClick, details }) => (
{index + 1 < currentStep ?
{step}
{isSelected && (
);
// --- MAIN APP COMPONENT ---
export default function ServerBuilder() {
const [currentStep, setCurrentStep] = useState(0); // 0 = Hero, 1 = Mobo, 2 = CPU, 3 = RAM, 4 = Storage, 5 = Review
const [config, setConfig] = useState({
motherboard: null,
cpu: null,
cpuCount: 1,
ram: null,
ramCount: 2,
storage: null,
storageCount: 2
});
// -- Filter Logic based on Compatibility Matrix --
// Available Motherboards (Always all)
const availableMobos = COMPATIBILITY_DATA.motherboards;
// Available CPUs: Must match Motherboard Socket
const availableCpus = config.motherboard
? COMPATIBILITY_DATA.cpus.filter(cpu => cpu.socket === config.motherboard.socket)
: [];
// Available RAM: Must match Motherboard RAM Type (DDR4/DDR5)
// In a real matrix, we'd also check CPU memory speed support, but let's stick to Type for the matrix logic
const availableRam = config.motherboard
? COMPATIBILITY_DATA.ram.filter(ram => ram.type === config.motherboard.ramType)
: [];
// Available Storage: Generally universal in this simplified matrix, but let's assume all fit
const availableStorage = COMPATIBILITY_DATA.storage;
const calculateTotal = () => {
let total = 0;
if (config.motherboard) total += config.motherboard.price;
if (config.cpu) total += config.cpu.price * config.cpuCount;
if (config.ram) total += config.ram.price * config.ramCount;
if (config.storage) total += config.storage.price * config.storageCount;
return total;
};
const resetBuilder = () => {
setConfig({
motherboard: null,
cpu: null,
cpuCount: 1,
ram: null,
ramCount: 2,
storage: null,
storageCount: 2
});
setCurrentStep(1);
};
// --- RENDER STEPS ---
const renderHero = () => (
{item.name}
${item.price.toLocaleString()}
{details.map((detail, idx) => (
{detail}
))}
{/* Abstract Background Decoration */}
);
const renderConfigurator = () => (
Construye tu Servidor Enterprise
Usa nuestra matriz de compatibilidad inteligente para diseñar la infraestructura perfecta para tu negocio. Rendimiento garantizado, cero errores de compatibilidad.
{/* LEFT: Main Builder Area */}
Draft
);
return (
{currentStep === 1 && '1. Selecciona el Chasis Base'} {currentStep === 2 && '2. Elige el Procesador'} {currentStep === 3 && '3. Configura la Memoria RAM'} {currentStep === 4 && '4. Selecciona el Almacenamiento'} {currentStep === 5 && 'Resumen de tu Configuración'}
{currentStep < 5 && ( Paso {currentStep} de 4 )}
{availableMobos.map(mobo => (
setConfig({...config, motherboard: mobo, cpu: null, ram: null})} // Reset deps
details={[
`Socket: ${mobo.socket}`,
`Formato: ${mobo.formFactor}`,
`RAM Max: ${mobo.maxRamSlots} slots`
]}
/>
))}
)}
{/* STEP 2: CPU */}
{currentStep === 2 && (
Compatibilidad Activa
Solo mostramos procesadores compatibles con el socket {config.motherboard.socket} de tu placa base.
{availableCpus.map(cpu => (
setConfig({...config, cpu: cpu})}
details={[
`Núcleos: ${cpu.cores}`,
`Velocidad: ${cpu.speed}`,
`Socket: ${cpu.socket}`
]}
/>
))}
{config.cpu && (
setConfig({...config, cpuCount: parseInt(e.target.value)})}
className="w-48 accent-blue-600"
/>
{config.cpuCount}
(Dual Socket Soportado)
{availableRam.map(ram => (
setConfig({...config, ram: ram})}
details={[
`Tipo: ${ram.type}`,
`ECC: Sí`,
`Compatibilidad: ${config.motherboard.name}`
]}
/>
))}
{config.ram && (
setConfig({...config, ramCount: parseInt(e.target.value)})}
className="w-48 accent-blue-600"
/>
{config.ramCount}
Total: {config.ramCount * parseInt(config.ram.name)}GB
{availableStorage.map(drive => (
setConfig({...config, storage: drive})}
details={[
`Interfaz: ${drive.interface}`,
`Clase: Enterprise`,
]}
/>
))}
{config.storage && (
setConfig({...config, storageCount: parseInt(e.target.value)})}
className="w-48 accent-blue-600"
/>
{config.storageCount}
RAID Configurable
¡Configuración Completa!
Tu servidor ha sido validado contra nuestra matriz de compatibilidad.
Especificaciones Finales
- Chasis: {config.motherboard.name}
- CPU: {config.cpuCount}x {config.cpu.name}
- RAM: {config.ramCount}x {config.ram.name} ({config.ramCount * parseInt(config.ram.name)}GB Total)
- Almacenamiento: {config.storageCount}x {config.storage.name}
Draft
{!config.motherboard ? (
${config.motherboard.price}
{config.cpu && (
${config.cpu.price * config.cpuCount}
)}
{config.ram && (
${config.ram.price * config.ramCount}
)}
{config.storage && (
${config.storage.price * config.storageCount}
)}
)}
Comienza seleccionando un chasis...
) : (
<>
{config.motherboard.name}
Placa Base / Chasis
{config.cpu.name}
x{config.cpuCount} Procesador
{config.ram.name}
x{config.ramCount} Memoria
{config.storage.name}
x{config.storageCount} Almacenamiento
Subtotal
${calculateTotal().toLocaleString()}
+ Impuestos estimados
{/* Navbar Simple */}
{currentStep === 0 ? renderHero() : renderConfigurator()}
);
}