shameemreza

import React from "react";

function EmployeeList(props) {
  const employees = props.employees;

  const employeeList = employees.map((employee) => (
    <div key={employee.id}>
      <h2>{employee.name}</h2>
      <p>Age: {employee.age}</p>
      <p>Position: {employee.position}</p>

shameemreza

import React from "react";
import EmployeeList from "./EmployeeList";

function App() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList(props) {
  const employees = props.employees;

  const employeeList = employees.map((employee) => (
    <tr key={employee.name}>
      <td>{employee.name}</td>
      <td>{employee.age}</td>
      <td>{employee.position}</td>

shameemreza

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

thead th {
  background-color: #5f9ea0;
  color: white;

shameemreza

import React from "react";
import EmployeeList from "./EmployeeList";

function App() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList() {
  return (
    <div>
      {/* Render the employee list here */}
    </div>
  );
}

shameemreza

import Link from "next/link";

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          <Link href="/users/[slug]" as={`/users/${user.slug}`}>
            <a>{user.name}</a>
          </Link>

shameemreza

function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

export async function getServerSideProps(context) {

shameemreza

import { useRouter } from "next/router";

function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  // Fetch data for user with id
  ...

  return (