Exercício: Tabela de notas estudantis

Cria-se o type para Student: src/types/Student.ts

export type Student = {
  id: number,
  active: boolean,
  name: string,
  email: string,
  avatar: string,
  grade1: number,
  grade2: number
}

Agora, cria-se o arquivo com os dados dos estudantes: src/data/students.ts

import { Student } from "@/types/Student";

export const studentsList: Student[] = [
    {
        id: 1,
        active: true,
        name: 'Fulano de Tal',
        email: 'fulano@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1547037579-f0fc020ac3be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 7.3,
        grade2: 8.1
    },
    {
        id: 2,
        active: true,
        name: 'Ciclano Silva',
        email: 'ciclano.silva@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1601233749202-95d04d5b3c00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjN8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 2.9,
        grade2: 8.7
    },
    {
        id: 3,
        active: false,
        name: 'Beltrano Matheus',
        email: 'beltrano.matheus@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 8.3,
        grade2: 6.4
    },
    {
        id: 4,
        active: true,
        name: 'Zuflano Caxias',
        email: 'zuflano.caxias@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1601576084861-5de423553c0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzF8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 9,
        grade2: 8.1
    },
    {
        id: 5,
        active: true,
        name: 'Turano Pires',
        email: 'turano.pires@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1564564244660-5d73c057f2d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDN8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 10,
        grade2: 9.7
    },
    {
        id: 6,
        active: false,
        name: 'Voltano Augusto',
        email: 'voltano.augusto@escola.com.br',
        avatar: 'https://images.unsplash.com/photo-1611689037241-d8dfe4280f2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzN8fHJvc3RvfGVufDB8MHwwfHx8Mg%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        grade1: 5.5,
        grade2: 6.2
    }
];

Fazemos a importação da lista de estudantes no page.tsx e invocamos o componente StudentList passando como props a lista de estudantes.

import { StudentTable } from '@/components/StudentTable';
import { studentsList } from '@/data/students'

function Page(){ 

  return(
    <div className='container mx-auto'>
      <h1 className='text-5xl mb-5'>Lista de estudantes</h1>
      <StudentTable students={studentsList}/>
    </div>
  )
}
export default Page;

Criaremos agora o componente StudentList.tsx que receberá a lista como props: src/components/StudentTable.tsx

import { Student } from "@/types/Student"

type Props = {
  students: Student[];
}

export const StudentTable = ({ students }: Props) => {
  return(
    <div>      
      <table className="w-full border border-gray-600 rounded-md overflow-hidden">
        <thead>
          <tr className="text-left border-b border-gray-600 bg-gray-800">
            <th className="p-3">Name</th>
            <th className="p-3">Status</th>
            <th className="p-3">Grade 1</th>
            <th className="p-3">Grade 2</th>
            <th className="p-3">Final Grade</th>
          </tr>
        </thead>
        <tbody>
            {students.map(item => (
              <tr key={item.id} className="text-gray-800 bg-gray-400 border-b border-gray-600">
                <td className="p-3 flex items-center">
                  <img src={item.avatar} alt={item.name} className="w-10 h-10 rounded-full mr-3" />
                  <div>
                    <div className="font-bold">{item.name}</div>
                    <div>{item.email}</div>
                  </div>
                </td>
                <td >
                  {item.active && <div className="p-3 px-2 py-1 inline-block rounded-sm bg-green-600 text-white text-xs">Active</div> }
                  {!item.active && <div className="p-3 px-2 py-1 inline-block rounded-sm bg-red-600 text-white text-xs">Inactive</div> }
                </td>
                <td className="p-3">{item.grade1.toFixed(1)}</td>
                <td className="p-3">{item.grade2.toFixed(1)}</td>
                <td className="p-3 font-bold">
                  {item.active && ((item.grade2+item.grade2)/2).toFixed(1)}
                  {!item.active && <div>--</div> }
                </td>
              </tr>
            ) )}
        </tbody>
      </table>
    </div>
  )
}

Toda a lista estilizada com o Tailwind.

vanderleipinto / react-restart

Exercício: Tabela de notas estudantis #28