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

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

Issue: Create a Next.js React page for project setup (setup.tsx)

Background

We need to create a new Next.js React page called setup.tsx for the project setup step in our application. This page will allow users to select options for their project's system architecture, such as language, framework, database, hosting, authentication framework, and CSS styling. The default options are TypeScript, Next.js, React, Supabase, Prisma, Vercel, NextAuth, TypeScript, and Tailwind CSS + Tailwind UI.

Task

Create a new Next.js page setup.tsx in the src/pages/create directory. This page should be a functional component using ES6 syntax like arrow functions, and it should use TypeScript.

Step 1: Imports

Import the required packages and components:

React and useState for managing component state
Next.js components: Link and Head
next-auth/react for authentication: useSession
Tailwind CSS for styling

Also, import any necessary TypeScript interfaces from the types.ts file.

Step 2: Component Structure

Create a functional component called SetupPage with the following structure:

A Head component for setting the page title
A main element with a Tailwind CSS container class
Inside the main element, add a heading and a subheading describing the purpose of the page
A form that contains the following fields:
- Language (default: TypeScript)
- Framework (default: Next.js)
- Frontend library (default: React)
- Backend service (default: Supabase)
- Database (default: Prisma)
- Hosting (default: Vercel)
- Authentication (default: NextAuth)
- CSS styling (default: Tailwind CSS + Tailwind UI)
A submit button for submitting the form

Step 3: State Management

Use the useState hook to manage the state for each form field. Initialize the state with the default values mentioned above.

Step 4: Authentication

Use the useSession hook from next-auth/react to get the user's session. Redirect unauthenticated users to the login page.

Step 5: Form Submission

Create a function called handleSubmit that will be triggered when the form is submitted. In this function, send the selected options to the appropriate API endpoint (assume the necessary API endpoints are already created). Handle any errors and display a success message upon successful submission.

Step 6: Styling

Style the page using Tailwind CSS classes. Do not use custom CSS classes or import any CSS files directly.

Step 7: User Interaction

Ensure that the form fields are interactive and that the user can select different options. Update the state accordingly when the user interacts with the form fields.

Example

import React, { useState } from "react";
import { Head } from "next/head";
import { Link } from "next/link";
import { useSession } from "next-auth/react";

const SetupPage: React.FC = () => {
  // State management, authentication, and form submission logic here

  return (
    <>
      <Head>
        <title>Project Setup</title>
      </Head>
      <main className="container mx-auto">
        {/* Heading, subheading, and form elements here */}
      </main>
    </>
  );
};

export default SetupPage;

Acceptance Criteria

The created setup.tsx page should match the given page description
The component should properly manage state and lifecycle, render correctly, and support necessary user interactions
The component should use the provided TypeScript interfaces and comply with the application's conventions

Please submit a pull request with the changes once you have completed the task.

PioneerSquareLabs / otto-playground