snort/src/Pages/Verification.tsx

import { ApiHost } from "Const";
import Nip5Service from "Element/Nip5Service";

import "./Verification.css";

export default function VerificationPage() {
  const services = [
    {
      name: "Snort",
      service: `${ApiHost}/api/v1/n5sp`,
      link: "https://snort.social/",
      supportLink: "https://snort.social/help",
      about: (
        <>
          Our very own NIP-05 verification service, help support the development
          of this site and get a shiny special badge on our site!
        </>
      ),
    },
    {
      name: "Nostr Plebs",
      service: "https://nostrplebs.com/api/v1",
      link: "https://nostrplebs.com/",
      supportLink: "https://nostrplebs.com/manage",
      about: (
        <>
          <p>
            Nostr Plebs is one of the first NIP-05 providers in the space and
            offers a good collection of domains at reasonable prices
          </p>
        </>
      ),
    },
  ];

  return (
    <div className="main-content verification">
      <h2>Get Verified</h2>
      <p>
        NIP-05 is a DNS based verification spec which helps to validate you as a
        real user.
      </p>
      <p>Getting NIP-05 verified can help:</p>
      <ul>
        <li>Prevent fake accounts from imitating you</li>
        <li>Make your profile easier to find and share</li>
        <li>
          Fund developers and platforms providing NIP-05 verification services
        </li>
      </ul>

      {services.map((a) => (
        <Nip5Service key={a.name} {...a} />
      ))}
    </div>
  );
}