Build to App

Dimensions

Length (mm) setDimensions({...dimensions, length: parseFloat(e.target.value)})} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />

Width (mm) setDimensions({...dimensions, width: parseFloat(e.target.value)})} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />

Thickness (mm) setDimensions({...dimensions, thickness: parseFloat(e.target.value)})} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />

Component Description

setDescription(e.target.value)}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition h-24 resize-none text-sm"
              />
            </div>

{selectedPartDetails && (
              <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-6">
                <h3 className="text-xl font-bold text-gray-900 mb-4">Part Details</h3>
                <div className="mb-3">
                  <div className="w-full h-4 rounded mb-2" style={{backgroundColor: selectedPartDetails.color}}></div>
                  <p className="font-semibold text-gray-900">{selectedPartDetails.name}</p>
                </div>
                <textarea
                  value={selectedPartDetails.description}
                  onChange={(e) => setSelectedPartDetails({...selectedPartDetails, description: e.target.value})}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition h-20 resize-none text-sm"
                />
              </div>
            )}
          </div>
        </div>

{/* Shape Creator */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-8 mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">Geometric Shape Creator</h2>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div>
              <div className="mb-6">
                <label className="block text-sm font-semibold text-gray-700 mb-3">Select Shape Type</label>
                <div className="grid grid-cols-2 gap-3">
                  {Object.keys(shapeFormulas).map(shape => (
                    <button
                      key={shape}
                      onClick={() => setShapeMode(shape)}
                      className={`px-4 py-3 rounded-lg font-semibold transition duration-200 ${
                        shapeMode === shape
                          ? 'bg-blue-600 text-white'
                          : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
                      }`}
                    >
                      {shape.charAt(0).toUpperCase() + shape.slice(1)}
                    </button>
                  ))}
                </div>
              </div>

<div className="bg-gray-50 rounded-xl p-6">
                <h4 className="font-semibold text-gray-900 mb-4">Mathematical Formulas</h4>
                <div className="space-y-3">
                  {shapeFormulas[shapeMode] && (
                    <>
                      <div className="bg-white p-3 rounded-lg border border-gray-200">
                        <p className="text-xs text-gray-600 mb-1">Area Formula</p>
                        <p className="font-mono text-sm font-semibold text-blue-600">{shapeFormulas[shapeMode].area}</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg border border-gray-200">
                        <p className="text-xs text-gray-600 mb-1">Perimeter Formula</p>
                        <p className="font-mono text-sm font-semibold text-blue-600">{shapeFormulas[shapeMode].perimeter}</p>
                      </div>
                    </>
                  )}
                </div>
              </div>

<div className="mt-6">
                <label className="block text-sm font-semibold text-gray-700 mb-3">Shape Description</label>
                <textarea
                  value={shapeDescription}
                  onChange={(e) => setShapeDescription(e.target.value)}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition h-24 resize-none text-sm"
                />
              </div>
            </div>

<div>
              <canvas
                width={400}
                height={350}
                className="w-full border border-gray-300 rounded-xl bg-gray-50"
                ref={(canvas) => {
                  if (canvas) {
                    const ctx = canvas.getContext('2d');
                    ctx.fillStyle = '#F8FAFC';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    
                    // Draw grid
                    ctx.strokeStyle = '#E2E8F0';
                    ctx.lineWidth = 1;
                    for (let i = 0; i <= canvas.width; i += 40) {
                      ctx.beginPath();
                      ctx.moveTo(i, 0);
                      ctx.lineTo(i, canvas.height);
                      ctx.stroke();
                    }
                    for (let i = 0; i <= canvas.height; i += 40) {
                      ctx.beginPath();
                      ctx.moveTo(0, i);
                      ctx.lineTo(canvas.width, i);
                      ctx.stroke();
                    }

drawShape(ctx);
                  }
                }}
              />
            </div>
          </div>
        </div>

{/* Drawing Page */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">3D Drawing Canvas</h2>
          
          <div className="mb-6 flex gap-3">
            <button
              onClick={() => setDrawingMode(!drawingMode)}
              className={`px-6 py-2 rounded-lg font-semibold transition duration-200 ${
                drawingMode
                  ? 'bg-red-600 text-white'
                  : 'bg-blue-600 text-white hover:bg-blue-700'
              }`}
            >
              {drawingMode ? 'Stop Drawing' : 'Start Drawing'}
            </button>
            <button
              onClick={() => setDrawing([])}
              className="px-6 py-2 bg-gray-200 text-gray-900 rounded-lg font-semibold hover:bg-gray-300 transition duration-200"
            >
              Clear Canvas
            </button>
          </div>

<div className="mt-6 p-4 bg-blue-50 rounded-xl border border-blue-200">
            <p className="text-sm text-blue-900">
              <strong>Drawing Instructions:</strong> Click "Start Drawing" to begin. Draw the 3D component outline, then save your sketch to integrate with the 3D model.
            </p>
          </div>
        </div>

<div className="mt-8 flex gap-4">
          <button
            onClick={() => setCurrentPage('details')}
            className="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition duration-200 shadow-md hover:shadow-lg"
          >
            View Details & Documentation
          </button>
        </div>
      </div>
    </div>
  );

// Details Page
  const DetailsPage = () => (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 p-8">
      <div className="max-w-7xl mx-auto">
        <button
          onClick={() => setCurrentPage('home')}
          className="mb-8 px-6 py-2 bg-gray-200 text-gray-900 rounded-lg font-semibold hover:bg-gray-300 transition"
        >
          ← Back to Design
        </button>

<h1 className="text-4xl font-bold text-gray-900 mb-2">Component Documentation</h1>
        <p className="text-gray-600 text-lg mb-12">Complete technical specifications and part descriptions</p>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Section 1: Overview */}
          <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-8">
            <div className="mb-6">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-2xl mb-4">📋</div>
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Overview</h2>
            </div>
            
            <div className="space-y-4">
              <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p className="text-sm text-gray-600 mb-2 font-semibold">Component Description</p>
                <p className="text-gray-900">{description}</p>
              </div>

<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p className="text-sm text-gray-600 mb-2 font-semibold">Shape Information</p>
                <p className="text-gray-900">{shapeDescription}</p>
              </div>

<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <p className="text-sm text-blue-900 mb-2 font-semibold">📐 Shape Type</p>
                <p className="text-blue-900 font-semibold">{shapeMode.toUpperCase()}</p>
              </div>
            </div>
          </div>

{/* Section 2: Dimensions & Specifications */}
          <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-8">
            <div className="mb-6">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-2xl mb-4">📏</div>
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Specifications</h2>
            </div>

<div className="space-y-4">
              <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p className="text-sm text-gray-600 mb-1 font-semibold">Length</p>
                <p className="text-2xl font-bold text-gray-900">{dimensions.length} mm</p>
              </div>

<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p className="text-sm text-gray-600 mb-1 font-semibold">Width</p>
                <p className="text-2xl font-bold text-gray-900">{dimensions.width} mm</p>
              </div>

<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p className="text-sm text-gray-600 mb-1 font-semibold">Thickness</p>
                <p className="text-2xl font-bold text-gray-900">{dimensions.thickness} mm</p>
              </div>

<div className="bg-purple-50 rounded-lg p-4 border border-purple-200">
                <p className="text-sm text-purple-900 mb-1 font-semibold">Volume</p>
                <p className="text-xl font-bold text-purple-900">
                  {(dimensions.length * dimensions.width * dimensions.thickness).toFixed(2)} mm³
                </p>
              </div>
            </div>
          </div>

{/* Section 3: Parts & Components */}
          <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-8">
            <div className="mb-6">
              <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center text-2xl mb-4">🔧</div>
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Components</h2>
            </div>

<div className="space-y-3">
              {parts.map((part, idx) => (
                <div key={part.id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                  <div className="flex items-start gap-3">
                    <div
                      className="w-4 h-4 rounded mt-1 flex-shrink-0"
                      style={{backgroundColor: part.color}}
                    ></div>
                    <div className="flex-1">
                      <p className="font-semibold text-gray-900 mb-1">{part.name}</p>
                      <p className="text-xs text-gray-600">{part.description}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

{/* Mathematical Formulas Section */}
        <div className="mt-12 bg-white rounded-2xl border border-gray-100 shadow-lg p-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-8">Mathematical Formulas</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {Object.entries(shapeFormulas).map(([shape, formulas]) => (
              <div key={shape} className="bg-gray-50 rounded-xl p-6 border border-gray-200">
                <h3 className="text-lg font-bold text-gray-900 mb-4 capitalize">{shape}</h3>
                <div className="space-y-3">
                  <div className="bg-white rounded-lg p-3 border border-gray-200">
                    <p className="text-xs text-gray-600 mb-1">Area</p>
                    <p className="font-mono text-sm font-semibold text-blue-600">{formulas.area}</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-gray-200">
                    <p className="text-xs text-gray-600 mb-1">Perimeter</p>
                    <p className="font-mono text-sm font-semibold text-blue-600">{formulas.perimeter}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

{/* Notes Section */}
        <div className="mt-12 bg-white rounded-2xl border border-gray-100 shadow-lg p-8 mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">Technical Notes</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-blue-50 rounded-xl p-6 border border-blue-200">
              <h3 className="font-bold text-blue-900 mb-3">Design Considerations</h3>
              <ul className="text-sm text-blue-900 space-y-2">
                <li>✓ Optimized for structural integrity</li>
                <li>✓ Precision-engineered tolerances</li>
                <li>✓ Material efficiency

const Component = BuildToApp;
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Component />);
  </script>
</body>
</html>