refactor: unify CollectionName components

resources/js/Components/Collections/CollectionName/CollectionName.test.tsx

@@ -1,21 +1,28 @@
-import React from "react";
 import { CollectionName } from "./CollectionName";
-import CollectionFactory from "@/Tests/Factories/Collections/CollectionFactory";
 import { render, screen } from "@/Tests/testing-library";
 
 describe("CollectionName", () => {
-    it("should render", () => {
-        const collection = new CollectionFactory().create();
+    const collection = {
+        name: "Test Collection",
+        chainId: 137 as App.Enums.Chain,
+        image: "https://example.com",
+    };
 
-        render(
-            <CollectionName
-                collection={collection}
-                ownedCount={collection.nftsCount}
-            />,
-        );
+    it("can render", () => {
+        render(<CollectionName collection={collection} />);
 
         expect(screen.getByTestId("CollectionName")).toBeInTheDocument();
         expect(screen.getAllByTestId("Img")).toHaveLength(1);
         expect(screen.getByTestId("NetworkIcon")).toBeInTheDocument();
+        expect(screen.queryByTestId("CollectionName__detail")).not.toBeInTheDocument();
+    });
+
+    it("can render children", () => {
+        render(<CollectionName collection={collection}>10 owned</CollectionName>);
+
+        expect(screen.getByTestId("CollectionName")).toBeInTheDocument();
+        expect(screen.getAllByTestId("Img")).toHaveLength(1);
+        expect(screen.getByTestId("NetworkIcon")).toBeInTheDocument();
+        expect(screen.getByTestId("CollectionName__detail")).toHaveTextContent("10 owned");
     });
 });

resources/js/Components/Collections/CollectionName/CollectionName.tsx

@@ -1,38 +1,39 @@
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
+import cn from "classnames";
+import { type ReactNode, useRef } from "react";
 import { Img } from "@/Components/Image";
 import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
 import { Tooltip } from "@/Components/Tooltip";
 import { useIsTruncated } from "@/Hooks/useIsTruncated";
 
-export const CollectionName = ({
-    collection,
-    ownedCount,
-}: {
-    ownedCount: number;
-    collection: App.Data.Collections.CollectionData;
-}): JSX.Element => {
-    const { t } = useTranslation();
-    const collectionNameReference = useRef<HTMLParagraphElement>(null);
-    const isTruncated = useIsTruncated({ reference: collectionNameReference });
+interface Properties {
+    collection: Pick<App.Data.Collections.CollectionData, "name" | "chainId" | "image">;
+    className?: string;
+    children?: ReactNode;
+}
+
+export const CollectionName = ({ collection, className, children }: Properties): JSX.Element => {
+    const nameReference = useRef<HTMLParagraphElement>(null);
+    const isTruncated = useIsTruncated({ reference: nameReference });
 
     return (
         <div
             data-testid="CollectionName"
-            className="group relative h-11 w-full cursor-pointer md:h-20"
+            className={cn("group relative h-11 w-full cursor-pointer md:h-20", className)}
         >
-            <div className="absolute flex w-full  items-center space-x-4">
+            <div className="absolute flex w-full items-center space-x-4">
                 <div className="relative h-8 w-8 shrink-0 md:h-20 md:w-20">
                     <Img
                         wrapperClassName="aspect-square"
                         className="h-full w-full rounded-full object-cover"
                         src={collection.image}
+                        alt={collection.name}
                         isCircle
                     />
 
-                    <div className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:hidden">
-                        <NetworkIcon networkId={collection.chainId} />
-                    </div>
+                    <NetworkIcon
+                        className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:hidden"
+                        networkId={collection.chainId}
+                    />
                 </div>
 
                 <div className="break-word-legacy min-w-0 space-y-0.5">
@@ -41,17 +42,22 @@ export const CollectionName = ({
                         content={collection.name}
                     >
                         <p
-                            ref={collectionNameReference}
+                            ref={nameReference}
                             data-testid="CollectionName__name"
                             className="group-hover md:leading-auto truncate text-sm font-medium leading-6 text-theme-secondary-900 group-hover:text-theme-primary-700 dark:text-theme-dark-50 dark:group-hover:text-theme-primary-400 md:text-lg"
                         >
                             {collection.name}
                         </p>
                     </Tooltip>
 
-                    <p className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-500 md:hidden">
-                        {ownedCount} {t("common.owned")}
-                    </p>
+                    {children !== undefined && (
+                        <span
+                            data-testid="CollectionName__detail"
+                            className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-500 md:hidden"
+                        >
+                            {children}
+                        </span>
+                    )}
                 </div>
             </div>
         </div>

resources/js/Components/Collections/CollectionsFullTable/CollectionsFullTableItem.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { type CollectionTableItemProperties } from "./CollectionsFullTable.contracts";
 import { CollectionFloorPrice } from "@/Components/Collections/CollectionFloorPrice";
 import { CollectionImages } from "@/Components/Collections/CollectionImages";
-import { CollectionName } from "@/Components/Collections/CollectionsFullTable/CollectionName";
+import { CollectionName } from "@/Components/Collections/CollectionName";
 import { PopularCollectionVolume } from "@/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks";
 import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
 import { TableCell, TableRow } from "@/Components/Table";
@@ -60,7 +60,9 @@ export const CollectionsFullTableItem = ({
                 paddingClassName="px-2 md:px-5"
                 hoverClassName=""
             >
-                <CollectionName collection={collection} />
+                <CollectionName collection={collection}>
+                    {collection.nftsCount} {t("common.items").toLowerCase()}
+                </CollectionName>
             </TableCell>
 
             {isLgAndAbove && (

resources/js/Components/Collections/CollectionsTable/CollectionsTableItem.tsx

@@ -72,10 +72,9 @@ export const CollectionsTableItem = ({
                 paddingClassName="px-2 md:px-5"
                 hoverClassName=""
             >
-                <CollectionName
-                    collection={collection}
-                    ownedCount={collection.nftsCount}
-                />
+                <CollectionName collection={collection}>
+                    {collection.nftsCount} {t("common.owned")}
+                </CollectionName>
             </TableCell>
 
             {isLgAndAbove && (