{data.map((row, key) => (
          <div key={key} className="border border-black p-4 rounded-lg shadow-md mb-4 w-[80%] mx-auto">
            <div className="flex justify-between">
              <span className="font-semibold">Name:</span>
              <span>{row.name}</span>
            </div>
            <div className="flex justify-between mt-2">
              <span className="font-semibold">Email:</span>
              <span>{row.email}</span>
            </div>
            <div className="flex justify-between mt-2">
              <span className="font-semibold">Telephone:</span>
              <span>{row.telephone}</span>
            </div>
            <div className="flex justify-center mt-4 space-x-2">
              <button className="bg-blue-500 text-white px-4 py-2 rounded">View</button>
              <button className="bg-green-500 text-white px-4 py-2 rounded">Edit</button>
              <button className="bg-red-500 text-white px-4 py-2 rounded" >
                Delete
              </button>
            </div>
          </div>
        ))}

js 


import { NextResponse } from "next/server";

// In-memory data storage for user data
let API: { user: number; name: string; email: string; phone: string }[] = [];
let userIdCounter = 1;

/**
 * Handles POST request to add new user data.
 * Expects name, email, and phone in the request body.
 * Adds the new user to the API array.
 */
export async function POST(request: Request) {
  const data = await request.json(); // Parse the request body

  // Validate the data types for name, email, and phone
  if (
    typeof data.name === "string" &&
    typeof data.email === "string" &&
    typeof data.phone === "string"
  ) {
    // Create a new user object
    const newUser = {
      user: userIdCounter++, // Assign a unique user ID
      name: data.name,
      email: data.email,
      phone: data.phone,
    };

    // Add the new user to the API array (in-memory database)
    API.push(newUser);

    // Return success response
    return NextResponse.json({ message: "User added successfully" });
  } else {
    // If data types are invalid, return an error response
    return NextResponse.json(
      {
        message: "Invalid data type. Please provide valid name, email, and phone.",
      },
      { status: 400 } // Bad request status code
    );
  }
}