namestone/components/Admin/SubdomainTable.js at 0e9c985a871f6e4f780fa7f95dcdaf08e9f814cd · namestonehq/namestone · 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
import React from "react";
import Link from "next/link";
import { shortenAddress, ensFontFallback } from "../../utils/FrontUtils";
import { Dialog } from "@headlessui/react";
import { useState } from "react";
import ConfirmationModal from "./ConfirmationModal";
import { formatNameCount } from "../../utils/FrontUtils";

export default function SubdomainTable({
  subdomains,
  admin,
  openEditNameModal,
  openDeleteSubnameModal,
  totalNames,
  showPagination
}) {

  return (
    <>
      <div className={`w-full h-full overflow-x-auto border border-1 border-neutral-200 rounded-t-lg ${showPagination ? '' : 'rounded-b-lg'}`}>
        <table className="min-w-full divide-y divide-neutral-200">
          <thead>
            <tr className=" bg-neutral-100">
              <th className="px-6 py-3 text-left ">
                <span className="text-sm font-bold text-brownblack-700">
                  Subname
                </span>
                <span className="pl-2 text-xs font-normal text-brownblack-700">
                  {formatNameCount(totalNames)}
                </span>
              </th>
              <th className="px-6 py-3 text-sm font-bold text-left text-brownblack-700">
                Address
              </th>

              {admin && (
                <th className="px-6 py-3 text-sm font-bold text-left text-brownblack-700">
                  Actions
                </th>
              )}
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-neutral-200">
            {subdomains.map((subdomain, index) => (
              <tr key={index}>
                <td className="px-6 py-4">
                  <Link
                    href={`https://app.ens.domains/${subdomain.name}.${subdomain.domain}`}
                    className="underline "
                    target="_blank"
                    rel="noreferrer"
                    style={{ fontFamily: ensFontFallback }}
                  >
                    {subdomain.name}.{subdomain.domain}
                  </Link>
                </td>
                <td className="px-6 py-4">
                  <Link
                    href={`https://etherscan.io/address/${subdomain.address}`}
                    className="underline "
                    target="_blank"
                    rel="noreferrer"
                  >
                    {shortenAddress(subdomain.address)}
                  </Link>
                </td>
                {admin && (
                  <td className="px-6 py-2">
                    <button
                      className="mr-4 text-orange-500 rounded-lg hover:underline"
                      onClick={() => openEditNameModal(index)}
                    >
                      Edit
                    </button>
                    <button
                      onClick={() =>
                        openDeleteSubnameModal(subdomain.name, subdomain.domain, subdomain.address)
                      }
                      className="text-red-600 rounded-lg hover:underline"
                    >
                      Delete
                    </button>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}