自動日本語名作成サイト

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

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [generatedName, setGeneratedName] = useState('');

  const generateName = () => {
    const firstNames = ['太郎', '花子', '健太', '美咲', '翔太', '優子', '大輔', '愛'];
    const lastNames = ['佐藤', '鈴木', '高橋', '田中', '伊藤', '渡辺', '山本', '中村'];
    const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
    const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
    setGeneratedName(`${randomLastName} ${randomFirstName}`);
  };

  return (
    <div className="App bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold text-gray-800 mb-8">Japanese Name Generator</h1>
      <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <div className="mb-6">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="firstName">
            First Name
          </label>
          <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="firstName"
            type="text"
            placeholder="First Name"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </div>
        <div className="mb-6">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="lastName">
            Last Name
          </label>
          <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="lastName"
            type="text"
            placeholder="Last Name"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>
        <div className="flex items-center justify-between">
          <button
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="button"
            onClick={generateName}
          >
            Generate Name
          </button>
        </div>
        {generatedName && (
          <div className="mt-6 text-center">
            <h2 className="text-2xl font-semibold text-gray-800">Generated Name:</h2>
            <p className="text-xl text-gray-600">{generatedName}</p>
          </div>
        )}
      </div>
      <footer className="mt-8 text-center text-gray-600 text-sm">
        © 2025 Japanese Name Generator. All rights reserved.
      </footer>
    </div>
  );
};

export default App;