AppCard.tsx raw

   1  import dayjs from "dayjs";
   2  import relativeTime from "dayjs/plugin/relativeTime";
   3  import { useNavigate } from "react-router";
   4  import AppAvatar from "src/components/AppAvatar";
   5  import { AppCardConnectionInfo } from "src/components/connections/AppCardConnectionInfo";
   6  import { AppCardNotice } from "src/components/connections/AppCardNotice";
   7  import {
   8    Card,
   9    CardContent,
  10    CardHeader,
  11    CardTitle,
  12  } from "src/components/ui/card";
  13  import { App } from "src/types";
  14  
  15  dayjs.extend(relativeTime);
  16  
  17  type Props = {
  18    app: App;
  19    actions?: React.ReactNode;
  20    readonly?: boolean;
  21  };
  22  
  23  export default function AppCard({ app, actions, readonly = false }: Props) {
  24    const navigate = useNavigate();
  25  
  26    return (
  27      <Card
  28        className="flex flex-col group cursor-pointer"
  29        onClick={() => navigate(`/apps/${app.id}`)}
  30      >
  31        <CardHeader>
  32          <CardTitle className="relative min-w-0">
  33            <div className="flex flex-row items-center">
  34              {!actions && <AppCardNotice app={app} />}
  35              <AppAvatar className="w-10 h-10" app={app} />
  36              <div className="flex-1 font-semibold text-xl whitespace-nowrap text-ellipsis overflow-hidden ml-4">
  37                {app.name}
  38              </div>
  39              <div
  40                className="flex items-center gap-2"
  41                onClick={
  42                  (e) =>
  43                    e.stopPropagation() /* stop the above navigation click handler */
  44                }
  45              >
  46                {actions}
  47              </div>
  48            </div>
  49          </CardTitle>
  50        </CardHeader>
  51        <CardContent className="flex-1 flex flex-col slashed-zero">
  52          <AppCardConnectionInfo connection={app} readonly={readonly} />
  53        </CardContent>
  54      </Card>
  55    );
  56  }
  57