Create page => src/pages/create/name.tsx

[otto-jacob]

Create a Next.js page for src/pages/create/name.tsx. Here are the instructions:

Issue: Create a Next.js React page name.tsx for the project creation flow

Background

We need to create a new page name.tsx as part of the project creation flow in our application. This page will allow users to enter a project name and proceed to the next step in the project creation process.

Requirements

1. Create a new Next.js page name.tsx in the src/pages/create directory.
2. Use TypeScript and functional components with arrow functions syntax.
3. Import necessary dependencies:
   • import { useState } from 'react';
   • import { useRouter } from 'next/router';
   • import { useSession } from 'next-auth/react';
   • import { Project } from '~/types';
4. Define a Props interface for the component. For now, it will be an empty interface: interface Props {}.
5. Use the useSession hook from next-auth/react to get the user's session. If the user is not authenticated, redirect them to the login page.
6. Use the useState hook to manage the state of the project name input field. Initialize it with an empty string.
7. Use the useRouter hook from next/router to navigate to the next step in the project creation process when the user submits the form.
8. Create a form with a label, an input field, and a submit button. Use Tailwind CSS classes for styling. Do not use custom CSS classes or import any CSS files directly.
   • The label should have the text "Project Name".
   • The input field should be of type "text" and have a placeholder "Enter project name".
   • The submit button should have the text "Next" and be disabled if the input field is empty.
9. When the form is submitted, prevent the default behavior, and perform the following actions:
   • Create a new Project object with the entered project name and the user's ID from the session.
   • Call the API endpoint to create a new project in the database (assume the endpoint is already created).
   • If the API call is successful, navigate to the next step in the project creation process (e.g., /create/description).
   • If there is an error, display an error message to the user.

Example component structure

const NamePage: React.FC<Props> = () => {
  // Import hooks and manage state

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    // Handle form submission
  };

  return (
    <div className="...">
      <h1 className="...">Create a New Project</h1>
      <form onSubmit={handleSubmit} className="...">
        <label htmlFor="projectName" className="...">
          Project Name
        </label>
        <input
          type="text"
          id="projectName"
          placeholder="Enter project name"
          value={projectName}
          onChange={(e) => setProjectName(e.target.value)}
          className="..."
        />
        <button type="submit" disabled={!projectName} className="...">
          Next
        </button>
      </form>
    </div>
  );
};

export default NamePage;

Please follow these instructions carefully and ensure that the created React component matches the given page description, properly manages the state and lifecycle, renders correctly, and supports necessary user interactions. If you have any questions or need clarification, feel free to ask.