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

[otto-jacob]

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

Issue: Create the Next.js index.tsx page

Background

We need to create the main landing page for our application. This page will be a Next.js page written in TypeScript as a functional component using ES6 syntax like arrow functions. The page will use Tailwind CSS for styling and next-auth/react for authentication. Data will be fetched from the database via API endpoints built using Prisma.

Task

Create a new Next.js page called index.tsx in the src/pages directory. This page should be a functional component using ES6 arrow functions and TypeScript. The page should use Tailwind CSS for styling and next-auth/react for authentication. Fetch data from the database via API endpoints built using Prisma.

Detailed Instructions

1. In the src/pages directory, create a new file called index.tsx.

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

   import { useSession } from "next-auth/react";
   import { useEffect, useState } from "react";
   import { Project } from "~/types";
   import ProjectCard from "~/components/ProjectCard";

3. Define the Props interface for this component:

   interface Props {
     projects: Project[];
   }

4. Create a functional component called IndexPage that accepts Props as its argument:

   const IndexPage: React.FC<Props> = ({ projects }) => {
     // Component logic and rendering will go here
   };

5. Inside the IndexPage component, use the useSession hook from next-auth/react to get the user's session:

   const { data: session } = useSession();

6. Use the useState hook to manage the state of the fetched projects:

   const [fetchedProjects, setFetchedProjects] = useState<Project[]>(projects);

7. Use the useEffect hook to fetch the projects data from the API when the component mounts:

   useEffect(() => {
     // Fetch projects data from the API and update the state
   }, []);

8. Inside the useEffect hook, create an async function called fetchProjects that fetches the projects data from the API:

   const fetchProjects = async () => {
     const response = await fetch("/api/projects");
     const data = await response.json();
     setFetchedProjects(data.projects);
   };

9. Call the fetchProjects function inside the useEffect hook:

   useEffect(() => {
     fetchProjects();
   }, []);

10. Render the IndexPage component with the following structure:

    • A heading with the text "Welcome to Otto"
    • A subheading with the text "Your Projects"
    • A section that maps over the fetchedProjects state and renders a ProjectCard component for each project

    return (
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold mb-4">Welcome to Otto</h1>
        <h2 className="text-2xl font-semibold mb-4">Your Projects</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {fetchedProjects.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </div>
      </div>
    );

11. Export the IndexPage component as the default export:

    export default IndexPage;

Acceptance Criteria

• The index.tsx page should be created in the src/pages directory.
• The page should use the useSession hook from next-auth/react for authentication.
• The page should fetch data from the database via API endpoints built using Prisma.
• The fetched data should be used in compliance with the provided TypeScript interfaces.
• The created React component should match the given page description and properly manage the state and lifecycle, render correctly, and support necessary user interactions.
• The page should use Tailwind CSS for styling and not import any CSS files directly. Only use Tailwind CSS classes, do not use custom CSS classes.
• When importing files, use ~ for the root directory (src).