111 – CGP.sa

import React, { useState, useMemo } from 'react'; import { PC_PARTS } from '../constants'; import { PCPart, BuildConfiguration } from '../types'; import { Check, Info, ShoppingCart, Trash2, Droplets, Zap, ShieldCheck } from 'lucide-react'; const Configurator: React.FC = () => { const [config, setConfig] = useState({ isCustomLoop: false }); const [activeCategory, setActiveCategory] = useState('CPU'); const standardCategories: PCPart['category'][] = ['CPU', 'GPU', 'RAM', 'Storage', 'Motherboard', 'Cooling', 'Case', 'PSU']; const waterCoolingCategories: PCPart['category'][] = ['Block', 'Pump', 'Radiator', 'Fittings', 'Tubing', 'Coolant']; const currentCategories = useMemo(() => { if (config.isCustomLoop) { // Replace standard Cooling with detailed water cooling steps const cats = [...standardCategories]; const coolingIdx = cats.indexOf('Cooling'); if (coolingIdx !== -1) { cats.splice(coolingIdx, 1, ...waterCoolingCategories); } return cats; } return standardCategories; }, [config.isCustomLoop]); const selectPart = (part: PCPart) => { setConfig(prev => ({ ...prev, [part.category.toLowerCase()]: part })); }; const removePart = (category: string) => { const newConfig = { ...config }; delete (newConfig as any)[category.toLowerCase()]; setConfig(newConfig); }; const toggleCustomLoop = (enabled: boolean) => { setConfig(prev => { const next = { ...prev, isCustomLoop: enabled }; // If switching modes, clear conflicting cooling parts if (enabled) { delete next.cooling; setActiveCategory('Block'); } else { waterCoolingCategories.forEach(cat => delete (next as any)[cat.toLowerCase()]); setActiveCategory('Cooling'); } return next; }); }; const totalPrice = useMemo(() => { return Object.entries(config).reduce((sum, [key, part]) => { if (key === 'isCustomLoop') return sum; const p = part as PCPart | undefined; return sum + (p?.price || 0); }, 0); }, [config]); return (

{/* Navigation & Selection (Left) */}

{/* Mode Switcher */}

{currentCategories.map((cat) => ( ))}

{/* Water Cooling Banner */} {config.isCustomLoop && waterCoolingCategories.includes(activeCategory) && (

Expert Craftsmanship

Our custom loops are pressure tested for 48 hours and use only high-grade medical acrylic or surgical steel fittings. Every bend is handcrafted.

)}

{PC_PARTS.filter(p => p.category === activeCategory).map((part) => (

selectPart(part)} className={`relative group p-6 rounded-2xl border transition-all cursor-pointer ${ (config as any)[part.category.toLowerCase()]?.id === part.id ? (config.isCustomLoop && waterCoolingCategories.includes(activeCategory) ? 'border-cyan-500 bg-cyan-500/5' : 'border-blue-500 bg-blue-500/5') : 'border-white/5 bg-white/5 hover:border-white/20' }`} >

{waterCoolingCategories.includes(part.category) && (

)}

{part.name}

{part.description}

${part.price} {(config as any)[part.category.toLowerCase()]?.id === part.id && (

)}

))}

{/* Summary (Right) */}

BUILD SUMMARY

{currentCategories.map((cat) => { const part = (config as any)[cat.toLowerCase()]; const isWaterCooling = waterCoolingCategories.includes(cat); return (

{cat} {isWaterCooling && }

{part ? part.name : 'Not Selected'}

{part ? `$${part.price}` : '--'} {part && ( )}

); })}

Total Estimated ${totalPrice.toLocaleString()}

{config.isCustomLoop ? 'Includes bespoke loop design, 48h pressure testing, and professional cable management.' : 'Price includes precision building, OS installation, and stress testing.' }

); }; export default Configurator;