FlyonUI 项目组件教程

import React, { useState } from 'react';

const App = () => {
  const [step, setStep] = useState(1);
  const [project, setProject] = useState({
    title: '',
    projectType: '',
    summary: '',
    description: '',
    icon: '',
    screenshots: [],
    tags: [],
    externalLink: ''
  });

  const handleNext = () => setStep(step + 1);
  const handlePrev = () => setStep(step - 1);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProject({ ...project, [name]: value });
  };

  const handleFileUpload = (e, type) => {
    const file = e.target.files[0];
    if (type === 'icon') {
      setProject({ ...project, icon: URL.createObjectURL(file) });
    } else {
      setProject({ ...project, screenshots: [...project.screenshots, URL.createObjectURL(file)] });
    }
  };

  const handleTagChange = (e) => {
    const tags = e.target.value.split(',');
    setProject({ ...project, tags });
  };

  const handlePublish = () => {
    console.log('Project Published:', project);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
        <h1 className="text-3xl font-bold mb-8">Create Project</h1>
        {step === 1 && (
          <div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Title</label>
              <input
                type="text"
                name="title"
                value={project.title}
                onChange={handleChange}
                className="w-full p-2 border rounded-lg"
              />
            </div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Project Type</label>
              <select
                name="projectType"
                value={project.projectType}
                onChange={handleChange}
                className="w-full p-2 border rounded-lg"
              >
                <option value="">Select</option>
                <option value="CoreModels">CoreModels</option>
                <option value="External">External</option>
              </select>
            </div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Summary</label>
              <input
                type="text"
                name="summary"
                value={project.summary}
                onChange={handleChange}
                className="w-full p-2 border rounded-lg"
              />
            </div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Description</label>
              <textarea
                name="description"
                value={project.description}
                onChange={handleChange}
                className="w-full p-2 border rounded-lg"
              />
            </div>
          </div>
        )}
        {step === 2 && (
          <div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Project Icon</label>
              <input
                type="file"
                onChange={(e) => handleFileUpload(e, 'icon')}
                className="w-full p-2 border rounded-lg"
              />
              {project.icon && <img src={project.icon} alt="project icon" className="w-20 h-20 mt-2" />}
            </div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Screenshots</label>
              <input
                type="file"
                multiple
                onChange={(e) => handleFileUpload(e, 'screenshots')}
                className="w-full p-2 border rounded-lg"
              />
              <div className="flex mt-2">
                {project.screenshots.map((screenshot, index) => (
                  <img key={index} src={screenshot} alt="screenshot" className="w-20 h-20 mr-2" />
                ))}
              </div>
            </div>
          </div>
        )}
        {step === 3 && (
          <div>
            <div className="mb-6">
              <label className="block text-sm font-medium mb-2">Project Tags</label>
              <input
                type="text"
                name="tags"
                value={project.tags.join(',')}
                onChange={handleTagChange}
                className="w-full p-2 border rounded-lg"
              />
            </div>
            {project.projectType === 'External' && (
              <div className="mb-6">
                <label className="block text-sm font-medium mb-2">External Link</label>
                <input
                  type="text"
                  name="externalLink"
                  value={project.externalLink}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-lg"
                />
              </div>
            )}
          </div>
        )}
        <div className="flex justify-between mt-8">
          {step > 1 && (
            <button
              onClick={handlePrev}
              className="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600"
            >
              Previous
            </button>
          )}
          {step < 3 ? (
            <button
              onClick={handleNext}
              className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600"
            >
              Next
            </button>
          ) : (
            <button
              onClick={handlePublish}
              className="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600"
            >
              Publish Project
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default App;