AppCardNotice.tsx raw

   1  import dayjs from "dayjs";
   2  import isBetween from "dayjs/plugin/isBetween"; // Add this line
   3  import { CalendarClockIcon } from "lucide-react";
   4  import { Link } from "react-router";
   5  import { Badge } from "src/components/ui/badge";
   6  import {
   7    Tooltip,
   8    TooltipContent,
   9    TooltipProvider,
  10    TooltipTrigger,
  11  } from "src/components/ui/tooltip";
  12  import { App } from "src/types";
  13  
  14  dayjs.extend(isBetween); // Extend dayjs with the isBetween plugin
  15  
  16  type AppCardNoticeProps = {
  17    app: App;
  18  };
  19  
  20  export function AppCardNotice({ app }: AppCardNoticeProps) {
  21    const now = dayjs();
  22    const expiresAt = dayjs(app.expiresAt);
  23    const isExpired = expiresAt.isBefore(now);
  24    const expiresSoon = expiresAt.isBetween(now, now.add(7, "days"));
  25  
  26    return (
  27      <div className="absolute top-0 right-0">
  28        {app.expiresAt ? (
  29          isExpired ? (
  30            <TooltipProvider>
  31              <Tooltip>
  32                <TooltipTrigger asChild>
  33                  <Link to={`/apps/${app.id}`}>
  34                    <Badge variant="destructive">
  35                      <CalendarClockIcon />
  36                      Expired
  37                    </Badge>
  38                  </Link>
  39                </TooltipTrigger>
  40                <TooltipContent>Expired {expiresAt.fromNow()}</TooltipContent>
  41              </Tooltip>
  42            </TooltipProvider>
  43          ) : expiresSoon ? (
  44            <TooltipProvider>
  45              <Tooltip>
  46                <TooltipTrigger asChild>
  47                  <Link to={`/apps/${app.id}`}>
  48                    <Badge variant="outline">
  49                      <CalendarClockIcon className="size-3 mr-2" />
  50                      Expires Soon
  51                    </Badge>
  52                  </Link>
  53                </TooltipTrigger>
  54                <TooltipContent>Expires {expiresAt.fromNow()}</TooltipContent>
  55              </Tooltip>
  56            </TooltipProvider>
  57          ) : null
  58        ) : null}
  59      </div>
  60    );
  61  }
  62