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

[kleneway]

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

Issue: Create a Next.js React page for entering project description

Background

We are building a web application for Otto, an AI-powered development platform. As part of the project creation flow, we need a page where users can enter a detailed description of their project. This page will be a Next.js page written in TypeScript as a functional component using ES6 syntax like arrow functions.

Task

Create a new Next.js React page called description.tsx inside the src/pages/create-project directory. This page will allow users to enter a detailed description of their project.

Requirements

1. Imports: Import the necessary dependencies at the top of the description.tsx file:

   • React and useState from 'react'
   • useRouter from 'next/router'
   • useSession from 'next-auth/react'
   • Layout component from '~/components/Layout'
   • Project type from '~/types'

2. Props Interface: Define a Props interface for the Description component. It should have a single property project of type Project.

3. State Management: Use the useState hook to manage the state of the project description. Initialize the state with an empty string.

4. Authentication: 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 using the useRouter hook from Next.js.

5. Component Structure: Create a functional component called Description that accepts the Props interface defined earlier. Inside the component, render the following elements:

   • A Layout component that wraps the entire content of the page.
   • An h1 element with a title for the page, e.g., "Enter Project Description".
   • A textarea element where users can enter the project description. Bind the value of the textarea to the description state and update the state when the textarea value changes.
   • A button element that allows users to submit the description and proceed to the next step in the project creation flow. The button should be disabled if the description is empty.

6. User Interaction: Add an event handler for the submit button's onClick event. When the button is clicked, save the description to the project object and navigate to the next step in the project creation flow using the useRouter hook.

7. Error Handling: Handle any potential error cases, such as failed navigation or issues with saving the description.

8. Styling: 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 React, { useState } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import Layout from '~/components/Layout';
import { Project } from '~/types';

interface Props {
  project: Project;
}

const Description: React.FC<Props> = ({ project }) => {
  const [description, setDescription] = useState('');
  const router = useRouter();
  const { data: session } = useSession();

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

  const handleSubmit = () => {
    // Save the description to the project object and navigate to the next step
  };

  return (
    <Layout>
      <h1 className="text-2xl font-bold">Enter Project Description</h1>
      <textarea
        className="w-full h-64 p-2 border border-gray-300 rounded"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button
        className="px-4 py-2 mt-4 text-white bg-blue-600 rounded"
        onClick={handleSubmit}
        disabled={!description}
      >
        Next
      </button>
    </Layout>
  );
};

export default Description;

Please follow these instructions to create the description.tsx page. Once completed, test the page to ensure it works as expected and submit a pull request for review. If you have any questions or need further clarification, feel free to ask.