refactor(ui): new AppCard component with stories and migration

app/[locale]/apps/[application]/page.tsx

@@ -8,6 +8,7 @@ import {
 
 import type { ChainName, CommitHistory, Lang, PageParams } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import ChainImages from "@/components/ChainImages"
 import { ChevronNext } from "@/components/Chevron"
 import I18nProvider from "@/components/I18nProvider"
@@ -41,8 +42,6 @@ import {
 import { slugify } from "@/lib/utils/url"
 import { formatStringList } from "@/lib/utils/wallets"
 
-import AppCard from "../_components/AppCard"
-
 import ScreenshotSwiper from "./_components/ScreenshotSwiper"
 import AppsAppJsonLD from "./page-jsonld"
 
@@ -366,12 +365,27 @@ const Page = async ({
                       className="flex-1 lg:w-1/3 lg:flex-none"
                     >
                       <AppCard
-                        app={relatedApp}
-                        imageSize={24}
-                        showDescription
-                        hoverClassName="hover:bg-background-highlight/50"
-                        matomoCategory="detail"
-                        matomoAction="more_apps"
+                        name={relatedApp.name}
+                        description={relatedApp.description}
+                        thumbnail={relatedApp.image}
+                        category={relatedApp.category}
+                        categoryTagStatus={
+                          APP_TAG_VARIANTS[relatedApp.category]
+                        }
+                        tags={relatedApp.subCategory}
+                        href={`/apps/${slugify(relatedApp.name)}`}
+                        imageSize="large"
+                        className="hover:bg-background-highlight/50"
+                        customEventOptions={{
+                          eventCategory: "detail",
+                          eventAction: "more_apps",
+                          eventName: `app name ${relatedApp.name}`,
+                        }}
+                        descriptionTracking={{
+                          eventCategory: "detail",
+                          eventAction: "more_apps_show_more",
+                          eventName: `app description ${relatedApp.name}`,
+                        }}
                       />
                     </div>
                   ))}

app/[locale]/apps/_components/AppsHighlight.tsx

@@ -1,12 +1,13 @@
 import { AppData } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import { Image } from "@/components/Image"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 import TruncatedText from "@/components/ui/TruncatedText"
 
+import { APP_TAG_VARIANTS } from "@/lib/utils/apps"
 import { slugify } from "@/lib/utils/url"
 
-import AppCard from "./AppCard"
 import AppsSwiper from "./AppsSwiper"
 
 interface AppsHighlightProps {
@@ -49,11 +50,13 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
           </TruncatedText>
         </div>
         <AppCard
-          app={app}
-          imageSize={16}
-          disableLink
-          matomoCategory={matomoCategory}
-          matomoAction="highlights"
+          name={app.name}
+          thumbnail={app.image}
+          category={app.category}
+          categoryTagStatus={APP_TAG_VARIANTS[app.category]}
+          tags={app.subCategory}
+          layout="horizontal"
+          imageSize="medium"
         />
       </LinkOverlay>
     </LinkBox>

app/[locale]/apps/_components/AppsTable.tsx

@@ -4,9 +4,10 @@ import { useMemo, useState } from "react"
 
 import { AppData } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import FilterBar from "@/components/FilterBar"
 
-import AppCard from "./AppCard"
+import { slugify } from "@/lib/utils/url"
 
 const AppsTable = ({ apps }: { apps: AppData[] }) => {
   const [filterBy, setFilterBy] = useState<string>()
@@ -52,11 +53,17 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
         {filteredApps.map((app) => (
           <div key={app.name}>
             <AppCard
-              app={app}
-              imageSize={14}
-              hideTag
-              matomoCategory="category_page"
-              matomoAction="apps"
+              name={app.name}
+              thumbnail={app.image}
+              tags={app.subCategory}
+              href={`/apps/${slugify(app.name)}`}
+              layout="horizontal"
+              imageSize="thumbnail"
+              customEventOptions={{
+                eventCategory: "category_page",
+                eventAction: "apps",
+                eventName: `app name ${app.name}`,
+              }}
             />
           </div>
         ))}

app/[locale]/apps/_components/CommunityPicks.tsx

@@ -1,10 +1,13 @@
 import { AppData, CommunityPick } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import Twitter from "@/components/icons/twitter.svg"
 import { Image } from "@/components/Image"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
-import AppCard from "./AppCard"
+import { APP_TAG_VARIANTS } from "@/lib/utils/apps"
+import { slugify } from "@/lib/utils/url"
+
 import AppsSwiper from "./AppsSwiper"
 
 const CommunityPicks = ({
@@ -50,24 +53,48 @@ const CommunityPicks = ({
         </div>
       </div>
       <div className="flex flex-row gap-2">
-        {pick.app1Name && getApp(pick.app1Name) && (
-          <AppCard
-            app={getApp(pick.app1Name)!}
-            imageSize={10}
-            isVertical
-            matomoCategory="community_picks"
-            matomoAction="app_click"
-          />
-        )}
-        {pick.app2Name && getApp(pick.app2Name) && (
-          <AppCard
-            app={getApp(pick.app2Name)!}
-            imageSize={10}
-            isVertical
-            matomoCategory="community_picks"
-            matomoAction="app_click"
-          />
-        )}
+        {pick.app1Name &&
+          getApp(pick.app1Name) &&
+          (() => {
+            const app = getApp(pick.app1Name)!
+            return (
+              <AppCard
+                name={app.name}
+                thumbnail={app.image}
+                category={app.category}
+                categoryTagStatus={APP_TAG_VARIANTS[app.category]}
+                tags={app.subCategory}
+                href={`/apps/${slugify(app.name)}`}
+                imageSize="xs"
+                customEventOptions={{
+                  eventCategory: "community_picks",
+                  eventAction: "app_click",
+                  eventName: `app name ${app.name}`,
+                }}
+              />
+            )
+          })()}
+        {pick.app2Name &&
+          getApp(pick.app2Name) &&
+          (() => {
+            const app = getApp(pick.app2Name)!
+            return (
+              <AppCard
+                name={app.name}
+                thumbnail={app.image}
+                category={app.category}
+                categoryTagStatus={APP_TAG_VARIANTS[app.category]}
+                tags={app.subCategory}
+                href={`/apps/${slugify(app.name)}`}
+                imageSize="xs"
+                customEventOptions={{
+                  eventCategory: "community_picks",
+                  eventAction: "app_click",
+                  eventName: `app name ${app.name}`,
+                }}
+              />
+            )
+          })()}
       </div>
     </div>
   ))