PayD/upstream_EmployeeEntry.tsx at main · Gildado/PayD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Icon } from "@stellar/design-system";
import { EmployeeList } from "../components/EmployeeList";

export default function EmployeeEntry() {
  const mockEmployees = [
    {
      id: "1",
      name: "Wilfred G.",
      email: "wilfred@example.com",
      imageUrl: "",
      position: "Lead Developer",
      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
      status: "Active" as "Active",
    },
    {
      id: "2",
      name: "Chinelo A.",
      email: "chinelo@example.com",
      imageUrl: "",
      position: "Product Manager",
      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
      status: "Active" as "Active",
    },
    {
      id: "3",
      name: "Emeka N.",
      email: "emeka@example.com",
      imageUrl: "https://i.pravatar.cc/150?img=3", // custom image
      position: "UX Designer",
      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
      status: "Active" as "Active",
    },
    {
      id: "4",
      name: "Fatima K.",
      email: "fatima@example.com",
      imageUrl: "",
      position: "HR Specialist",
      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
      status: "Active" as "Active",
    },
  ];

  return (
    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
      <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
        <div>
          <h1 className="text-4xl font-black mb-2 tracking-tight">
            Workforce <span className="text-accent">Directory</span>
          </h1>
          <p className="text-muted font-mono text-sm tracking-wider uppercase">
            Employee roster and compliance
          </p>
        </div>
        <button
          id="tour-add-employee"
          className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10"
        >
          <Icon.Plus size="sm" />
          Add Employee
        </button>
      </div>

      <EmployeeList
        employees={mockEmployees}
        onEmployeeClick={(employee) => alert(`Clicked: ${employee.name}`)}
      />
    </div>
  );
}