feat: allow nameshield children (#175)

* feat: allow nameshield children * bump * more props * bump version * remove notrab
namehash · Dec 4, 2023 · 3a7aab0 · 3a7aab0
1 parent fcb0d55
commit 3a7aab0
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@namehash/nameguard-react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch --clean=false",

diff --git a/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx b/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx
@@ -31,7 +31,13 @@ export const NameBadge = ({ placeholder, onClick, data }: NameBadgeProps) => {
       <span className="text-black text-sm leading-5">
         {data.beautiful_name || data.name}
       </span>
-      <NameShield data={data} />
+      <NameShield data={data}>
+        <div className="text-sm text-white">
+          <button className="appearance-none underline" onClick={onClick}>
+            Inspect name for details
+          </button>
+        </div>
+      </NameShield>
     </button>
   );
 };
diff --git a/packages/nameguard-react/src/components/NameShield/index.tsx b/packages/nameguard-react/src/components/NameShield/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import type { ConsolidatedNameGuardReport, Rating } from "@namehash/nameguard";
 import cc from "classcat";
 
@@ -24,15 +24,21 @@ function textColor(rating?: Rating) {
 
 type NameShieldProps = {
   data?: ConsolidatedNameGuardReport;
+  children?: ReactNode;
+  disableHover?: boolean;
 };
 
-export function NameShield({ data }: NameShieldProps) {
+export function NameShield({ data, children, disableHover }: NameShieldProps) {
   if (!data) return null;
 
-  const { title, name, rating, risk_count, highest_risk } = data;
+  const { title, subtitle, rating, risk_count, highest_risk } = data;
 
   const textClass = cc(["font-semibold", textColor(rating)]);
 
+  if (disableHover) {
+    return <Shield status={rating} size="tiny" className="cursor-pointer" />;
+  }
+
   return (
     <Tooltip
       trigger={
@@ -48,22 +54,14 @@ export function NameShield({ data }: NameShieldProps) {
           <div className="flex items-center justify-between">
             <span className={textClass}>{title}</span>
             <span className="text-sm font-normal text-gray-400">
-              {risk_count} risk
-              {(risk_count || 0) > 1 && "s"} detected
+              {risk_count} risk{risk_count !== 1 && "s"} detected
             </span>
           </div>
-          <div className="space-y-0.5">
-            <div className="text-sm text-white">{highest_risk?.message}</div>
-            {/* <div className="text-sm text-white">
-              <a
-                href={`https://nameguard.io/inspect/${name}`}
-                className="underline"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Inspect name for details
-              </a>
-            </div> */}
+          <div className="space-y-2.5">
+            <div className="text-sm text-white">
+              {highest_risk?.message || subtitle}
+            </div>
+            {children}
           </div>
         </div>
       </div>

diff --git a/packages/nameguard-react/src/components/Search/SearchModal.tsx b/packages/nameguard-react/src/components/Search/SearchModal.tsx
@@ -21,7 +21,7 @@ export const SearchModal = () => {
 
   return (
     <Transition.Root show={modalOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-40" onClose={handleClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"

diff --git a/packages/nameguard-react/src/components/Shield/Shield.tsx b/packages/nameguard-react/src/components/Shield/Shield.tsx
@@ -64,7 +64,8 @@ export const Shield = ({ name }: ShieldProps) => {
           <div className="flex items-center justify-between">
             <span className={textClass}>{result.title}</span>
             <span className="text-sm font-normal text-gray-400">
-              {result.risk_count} risk{result.risk_count >= 0 && "s"} detected
+              {result.risk_count} risk{result.risk_count === 1 ? "" : "s"}{" "}
+              detected
             </span>
           </div>
           <div className="text-sm text-white">{result.subtitle}</div>