website/components/builds/build-table.tsx at cb843d2fa05e08343d8f85f5ec940952f692a536 · EternalCodeTeam/website · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { AnimatePresence } from "framer-motion";
import { Loader2, Package } from "lucide-react";
import type { Project } from "@/app/api/builds/builds";
import { type Build, BuildRow } from "./build-row";

interface BuildTableProps {
  loading: boolean;
  builds: Build[];
  project: Project;
  lastDownloadedId: string | null;
  onDownload: (id: string) => void;
}

export function BuildTable({
  loading,
  builds,
  project,
  lastDownloadedId,
  onDownload,
}: BuildTableProps) {
  return (
    <div className="min-h-[400px]">
      {loading ? (
        <output
          aria-live="polite"
          className="flex flex-col items-center justify-center gap-4 py-32 text-gray-400"
        >
          <Loader2 className="h-8 w-8 animate-spin text-blue-500 motion-reduce:animate-none" />
          <p className="animate-pulse font-medium text-sm motion-reduce:animate-none">
            Fetching builds for {project.name}…
          </p>
        </output>
      ) : (
        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white/60 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/40">
          <div className="overflow-x-auto">
            <table className="w-full border-collapse whitespace-nowrap text-left text-sm md:whitespace-normal">
              <thead className="border-gray-200 border-b bg-gray-50/50 text-gray-900 dark:border-gray-800 dark:bg-gray-900/50 dark:text-gray-100">
                <tr>
                  <th className="w-full px-4 py-4 font-semibold md:w-auto md:px-6" scope="col">
                    Name
                  </th>
                  <th
                    className="hidden px-6 py-4 font-semibold text-gray-500 md:table-cell dark:text-gray-400"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    className="hidden px-6 py-4 font-semibold text-gray-500 lg:table-cell dark:text-gray-400"
                    scope="col"
                  >
                    Ref
                  </th>
                  <th className="px-4 py-4 text-right font-semibold md:px-6" scope="col">
                    Action
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                <AnimatePresence mode="wait">
                  {builds.length === 0 ? (
                    <tr>
                      <td className="px-6 py-20 text-center text-gray-500" colSpan={4}>
                        <div className="flex flex-col items-center gap-3">
                          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800/50">
                            <Package className="h-6 w-6 text-gray-400 opacity-50" />
                          </div>
                          <div className="space-y-1">
                            <p className="font-medium text-gray-900 text-lg dark:text-gray-200">
                              No builds found
                            </p>
                            <p className="text-gray-500 text-sm dark:text-gray-400">
                              No {project.name} builds available in this category.
                            </p>
                          </div>
                        </div>
                      </td>
                    </tr>
                  ) : (
                    builds.map((build, i) => (
                      <BuildRow
                        build={build}
                        index={i}
                        key={build.id}
                        lastDownloadedId={lastDownloadedId}
                        onDownload={onDownload}
                      />
                    ))
                  )}
                </AnimatePresence>
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}