AppStoreDetailHeader.tsx raw

   1  import { CheckCircleIcon } from "lucide-react";
   2  import React from "react";
   3  import AppHeader from "src/components/AppHeader";
   4  import { AppStoreApp } from "src/components/connections/SuggestedAppData";
   5  import { NostrWalletConnectIcon } from "src/components/icons/NostrWalletConnectIcon";
   6  import ResponsiveLinkButton from "src/components/ResponsiveLinkButton";
   7  import { Badge } from "src/components/ui/badge";
   8  import { useAppsForAppStoreApp } from "src/hooks/useApps";
   9  
  10  // TODO: remove once new connection wizard is added
  11  export function AppStoreDetailHeader({
  12    appStoreApp,
  13    contentRight,
  14  }: {
  15    appStoreApp: AppStoreApp;
  16    contentRight?: React.ReactNode | null;
  17  }) {
  18    const connectedApps = useAppsForAppStoreApp(appStoreApp);
  19    if (!connectedApps) {
  20      return null;
  21    }
  22  
  23    return (
  24      <>
  25        <AppHeader
  26          pageTitle={appStoreApp.title}
  27          icon={
  28            <img
  29              src={appStoreApp.logo}
  30              alt="logo"
  31              className="inline rounded-lg w-14 h-14"
  32            />
  33          }
  34          title={
  35            <div className="flex items-center gap-2">
  36              {appStoreApp.title}
  37              {!!connectedApps.length && (
  38                <Badge variant="positive" className="flex items-center gap-1">
  39                  <CheckCircleIcon className="w-3 h-3" />{" "}
  40                  {connectedApps.length > 1
  41                    ? `${connectedApps.length} Connections`
  42                    : "Connected"}
  43                </Badge>
  44              )}
  45            </div>
  46          }
  47          description={appStoreApp.description}
  48          contentRight={
  49            contentRight !== undefined ? (
  50              contentRight
  51            ) : (
  52              <ResponsiveLinkButton
  53                to={`/apps/new?app=${appStoreApp.id}`}
  54                icon={NostrWalletConnectIcon}
  55                text={`Connect to ${appStoreApp.title}`}
  56              />
  57            )
  58          }
  59        />
  60      </>
  61    );
  62  }
  63