NewArrivalsWidget.tsx raw

   1  import { ChevronRightIcon } from "lucide-react";
   2  import { Link } from "react-router";
   3  import {
   4    appStoreApps,
   5    getAppStoreUrl,
   6  } from "src/components/connections/SuggestedAppData";
   7  import {
   8    Card,
   9    CardContent,
  10    CardHeader,
  11    CardTitle,
  12  } from "src/components/ui/card";
  13  
  14  export function NewArrivalsWidget() {
  15    const latestApps = appStoreApps
  16      .filter((app) => !!app.addedDate)
  17      .sort((a, b) => b.addedDate!.localeCompare(a.addedDate!))
  18      .slice(0, 3);
  19  
  20    if (!latestApps.length) {
  21      return null;
  22    }
  23  
  24    return (
  25      <Card>
  26        <CardHeader>
  27          <CardTitle>New Arrivals</CardTitle>
  28        </CardHeader>
  29        <CardContent className="grid gap-4">
  30          {latestApps.map((app) => (
  31            <Link key={app.id} to={getAppStoreUrl(app)} className="group">
  32              <div className="flex items-center gap-3">
  33                <img
  34                  src={app.logo}
  35                  alt={`${app.title} logo`}
  36                  className="w-12 h-12 rounded-lg object-cover"
  37                />
  38                <div className="min-w-0 flex-1">
  39                  <CardTitle>{app.title}</CardTitle>
  40                  <p className="text-sm text-muted-foreground line-clamp-1">
  41                    {app.description}
  42                  </p>
  43                </div>
  44                <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
  45              </div>
  46            </Link>
  47          ))}
  48        </CardContent>
  49      </Card>
  50    );
  51  }
  52