交互式元素周期表

import React, { useState } from 'react';
import './App.css';

const elements = [
  { symbol: 'H', name: 'Hydrogen', atomicNumber: 1, details: 'Hydrogen is the lightest element.' },
  { symbol: 'He', name: 'Helium', atomicNumber: 2, details: 'Helium is a noble gas.' },
  // Add more elements as needed
];

function App() {
  const [selectedElement, setSelectedElement] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');

  const handleElementClick = (element) => {
    setSelectedElement(element);
  };

  const handleReset = () => {
    setSelectedElement(null);
    setSearchTerm('');
  };

  const handleDownload = () => {
    if (selectedElement) {
      const elementDetails = `${selectedElement.name} (${selectedElement.symbol}): ${selectedElement.details}`;
      const blob = new Blob([elementDetails], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `${selectedElement.name}.txt`;
      link.click();
    }
  };

  const filteredElements = elements.filter(element =>
    element.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    element.symbol.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="App bg-gray-100 min-h-screen p-6">
      <h1 className="text-4xl font-bold text-center mb-8 text-blue-800">Interactive Periodic Table</h1>
      <div className="flex justify-center mb-6">
        <input
          type="text"
          placeholder="Search for an element"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={handleReset}
          className="ml-4 p-2 bg-red-500 text-white rounded-md hover:bg-red-600"
        >
          Reset
        </button>
      </div>
      <div className="grid grid-cols-10 gap-2 mb-6">
        {filteredElements.map(element => (
          <button
            key={element.atomicNumber}
            onClick={() => handleElementClick(element)}
            className="p-4 bg-white border border-gray-300 rounded-md hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <strong>{element.symbol}</strong>
            <div className="text-sm">{element.name}</div>
          </button>
        ))}
      </div>
      {selectedElement && (
        <div className="bg-white p-6 rounded-md shadow-md">
          <h2 className="text-2xl font-bold mb-4 text-blue-800">{selectedElement.name} ({selectedElement.symbol})</h2>
          <p className="text-gray-700">{selectedElement.details}</p>
          <button
            onClick={handleDownload}
            className="mt-4 p-2 bg-green-500 text-white rounded-md hover:bg-green-600"
          >
            Download Details
          </button>
        </div>
      )}
      <footer className="text-center mt-8 text-gray-500">
        &copy; 2025 Interactive Periodic Table. All rights reserved.
      </footer>
    </div>
  );
}

export default App;