add additional names to the interface

Author: Kraysent

src/components/core/Hint.tsx

@@ -2,24 +2,49 @@ import { Tooltip } from "flowbite-react";
 import { ReactElement, ReactNode } from "react";
 import { MdHelpOutline } from "react-icons/md";
 
+export type HintPosition = "top" | "left" | "right" | "bottom";
+
 interface HintProps {
-  children: ReactElement;
+  children?: ReactElement;
   hintContent: ReactNode;
+  position?: HintPosition;
   className?: string;
+  trigger?: "icon" | "child";
 }
 
+const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl";
+const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" };
+
 export function Hint(props: HintProps): ReactElement {
+  const placement = props.position ?? "top";
+  const trigger = props.trigger ?? "icon";
+
+  if (trigger === "child") {
+    return (
+      <Tooltip
+        content={props.hintContent}
+        arrow={false}
+        placement={placement}
+        className={tooltipClassName}
+        theme={tooltipTheme}
+      >
+        {props.children}
+      </Tooltip>
+    );
+  }
+
   return (
     <div
-      className={`flex items-center justify-center gap-2 ${props.className}`}
+      className={`flex items-center justify-center gap-2 ${props.className ?? ""}`}
     >
       <div>{props.children}</div>
       <div>
         <Tooltip
           content={props.hintContent}
           arrow={false}
-          placement="top"
-          className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1 max-w-xl"
+          placement={placement}
+          className={tooltipClassName}
+          theme={tooltipTheme}
         >
           <MdHelpOutline />
         </Tooltip>

src/pages/ObjectDetails.tsx

@@ -4,6 +4,7 @@ import { AladinViewer } from "../components/core/Aladin";
 import { Loading } from "../components/core/Loading";
 import { ErrorPage } from "../components/ui/ErrorPage";
 import { CatalogData } from "../components/ui/CatalogData";
+import { Hint } from "../components/core/Hint";
 import { Link } from "../components/core/Link";
 import { querySimple } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
@@ -40,6 +41,29 @@ function ObjectDetails({ object, schema }: ObjectDetailsProps): ReactElement {
           >
             OHP Mirror
           </Link>
+          {object.catalogs?.additional_designations &&
+            object.catalogs.additional_designations.length > 0 && (
+              <div className="mt-4">
+                <p className="font-medium mb-1">Also known as:</p>
+                <ul className="list-none space-y-1">
+                  {object.catalogs.additional_designations.map((d, i) => (
+                    <li key={i} className="flex items-center gap-2">
+                      <span>{d.name}</span>
+                      <Hint
+                        hintContent={
+                          <span>
+                            {d.source.title}
+                            {d.source.authors.length > 0 &&
+                              ` — ${d.source.authors.join(", ")} (${d.source.year})`}
+                          </span>
+                        }
+                        className="gap-1"
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
         </div>
       </div>
       <CatalogData catalogs={object.catalogs} schema={schema} />