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

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

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

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";

Define the Props interface for this component:
```
interface Props {
 projects: Project[];
}
```

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
};

Inside the IndexPage component, use the useSession hook from next-auth/react to get the user's session:
```
const { data: session } = useSession();
```

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

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

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
}, []);
```

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);
};

Call the fetchProjects function inside the useEffect hook:
```
useEffect(() => {
 fetchProjects();
}, []);
```

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>
);

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).

PioneerSquareLabs / otto-playground