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

[kleneway]

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

Issue: Create a Next.js React page for entering the project name (name.tsx)

Description

We need to create a new Next.js page called name.tsx that will allow users to enter the name of their new project. This page will be part of the project creation flow and will be the first step in the process. The user should be able to input the project name and click a button to proceed to the next step in the project creation flow.

Requirements

1. Create a new Next.js page called name.tsx inside the src/pages/create-project directory. This page should be written in TypeScript as a functional component using ES6 syntax like arrow functions.

2. Import the necessary dependencies at the top of the file:

   • import { useState } from 'react';
   • import { useRouter } from 'next/router';
   • import { useSession } from 'next-auth/react';
   • import Layout from '~/components/Layout';

3. Define the Name component as a functional component with no props. Use the useSession hook to get the user's session. If the user is not authenticated, redirect them to the login page using the useRouter hook.

4. Inside the Name component, create a state variable called projectName using the useState hook. This state variable will store the user's input for the project name. Initialize the state with an empty string.

5. Create a function called handleSubmit that will be called when the user clicks the "Next" button. Inside this function, validate the projectName state variable to ensure it is not empty. If it is empty, show an error message to the user. If the project name is valid, use the useRouter hook to navigate to the next step in the project creation flow (e.g., /create-project/description).

6. In the return statement of the Name component, render the following elements inside the Layout component:

   • An h1 element with the text "Enter Project Name".
   • A paragraph with a brief description of this step, such as "Please enter a name for your new project. This name will be used throughout the application and can be changed later if needed."
   • An input field of type "text" with a placeholder "Project Name". Bind the projectName state variable to the input field using the value and onChange props.
   • A "Next" button that calls the handleSubmit function when clicked. Style the button using Tailwind CSS classes.

7. Use Tailwind CSS for styling the page. Do not import any CSS files directly. Only use Tailwind CSS classes and do not use custom CSS classes.

Example

import { useState } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import Layout from '~/components/Layout';

const Name = () => {
  const { data: session } = useSession();
  const router = useRouter();
  const [projectName, setProjectName] = useState('');

  if (!session) {
    router.push('/login');
  }

  const handleSubmit = () => {
    if (!projectName) {
      // Show error message to the user
    } else {
      router.push('/create-project/description');
    }
  };

  return (
    <Layout>
      <h1 className="text-2xl font-bold">Enter Project Name</h1>
      <p className="mt-4">
        Please enter a name for your new project. This name will be used throughout the application and can be changed later if needed.
      </p>
      <input
        type="text"
        placeholder="Project Name"
        value={projectName}
        onChange={(e) => setProjectName(e.target.value)}
        className="mt-4 p-2 border border-gray-300 rounded"
      />
      <button onClick={handleSubmit} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        Next
      </button>
    </Layout>
  );
};

export default Name;

Please follow these instructions to create the name.tsx page. Once completed, create a pull request for review. If you have any questions or need clarification, feel free to reach out.