feat: Learning Hub Guided Tours

src/components/Learn/FeaturedTours.tsx

@@ -5,39 +5,41 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Paragraph, Text } from "@/components/ui/typography";
+import { APP_ROUTES } from "@/routes/router";
 import { tracking } from "@/utils/tracking";
 
+import { tours as tourCards } from "./tours";
+
 interface FeaturedTour {
   id: string;
   title: string;
   duration: string;
   tag?: "new" | "popular";
+  available: boolean;
 }
 
-const STUB_TOURS: FeaturedTour[] = [
-  {
-    id: "first-pipeline",
-    title: "Build your first pipeline",
-    duration: "4 min",
-    tag: "popular",
-  },
-  { id: "using-secrets", title: "Using secrets safely", duration: "2 min" },
-  {
-    id: "multinode-tasks",
-    title: "Run multinode tasks",
-    duration: "3 min",
-    tag: "new",
-  },
-  {
-    id: "custom-components",
-    title: "Create a custom component",
-    duration: "5 min",
-  },
+const FEATURED_TOUR_IDS: Array<Pick<FeaturedTour, "id" | "tag">> = [
+  { id: "navigating-the-editor", tag: "new" },
+  { id: "first-pipeline", tag: "popular" },
+  { id: "using-secrets" },
+  { id: "multinode-tasks" },
 ];
 
+function buildFeaturedTours(): FeaturedTour[] {
+  return FEATURED_TOUR_IDS.flatMap(({ id, tag }) => {
+    const card = tourCards.find((c) => c.id === id);
+    if (!card) return [];
+    return [
+      { id, title: card.title, duration: card.duration, tag, available: false },
+    ];
+  });
+}
+
 export function FeaturedTours() {
+  const featured = buildFeaturedTours();
+
   return (
-    <div className="h-full rounded-xl border border-border bg-card p-5">
+    <div className="h-full rounded-xl border border-border bg-card p-5 max-w-160">
       <BlockStack gap="3" className="h-full">
         <InlineStack gap="2" blockAlign="center" align="space-between">
           <InlineStack gap="2" blockAlign="center">
@@ -60,44 +62,71 @@ export function FeaturedTours() {
           </Button>
         </InlineStack>
 
-        <ul className="list-none p-0 m-0 flex flex-col gap-1 flex-1">
-          {STUB_TOURS.map((tour) => (
-            <li key={tour.id}>
-              <button
-                type="button"
-                className="w-full flex items-center justify-between gap-3 px-3 py-2 rounded-md hover:bg-muted/60 text-left"
-                {...tracking("learning_hub.tours.start", { tour_id: tour.id })}
+        <BlockStack gap="1">
+          {featured.map((tour) => (
+            <Button
+              key={tour.id}
+              variant="ghost"
+              size="lg"
+              disabled
+              className="w-full"
+              {...tracking("learning_hub.tours.start", {
+                tour_id: tour.id,
+              })}
+            >
+              <Link
+                to={APP_ROUTES.TOUR_DETAIL}
+                params={{ tourId: tour.id }}
+                className="w-full"
               >
-                <BlockStack gap="0" className="min-w-0">
-                  <InlineStack gap="2" blockAlign="center">
-                    <Paragraph size="sm" weight="semibold" className="truncate">
-                      {tour.title}
-                    </Paragraph>
-                    {tour.tag && (
-                      <Badge
-                        size="sm"
-                        variant={tour.tag === "new" ? "default" : "secondary"}
-                        className="capitalize"
-                      >
-                        {tour.tag}
-                      </Badge>
-                    )}
-                  </InlineStack>
-                  <Text size="xs" tone="subdued">
-                    {tour.duration}
-                  </Text>
-                </BlockStack>
-                <Icon
-                  name="Play"
-                  size="sm"
-                  className="text-muted-foreground shrink-0"
-                  aria-hidden="true"
-                />
-              </button>
-            </li>
+                <InlineStack
+                  gap="4"
+                  align="space-between"
+                  blockAlign="center"
+                  wrap="nowrap"
+                >
+                  <FeaturedTourLabel tour={tour} />
+                  <Icon
+                    name="Play"
+                    size="sm"
+                    className="text-muted-foreground shrink-0"
+                    aria-hidden="true"
+                  />
+                </InlineStack>
+              </Link>
+            </Button>
           ))}
-        </ul>
+        </BlockStack>
       </BlockStack>
     </div>
   );
 }
+
+function FeaturedTourLabel({ tour }: { tour: FeaturedTour }) {
+  return (
+    <BlockStack className="min-w-0">
+      <InlineStack gap="2" blockAlign="center">
+        <Paragraph size="sm" weight="semibold" className="truncate">
+          {tour.title}
+        </Paragraph>
+        {tour.tag && (
+          <Badge
+            size="sm"
+            variant={tour.tag === "new" ? "default" : "secondary"}
+            className="capitalize"
+          >
+            {tour.tag}
+          </Badge>
+        )}
+        {!tour.available && (
+          <Badge size="sm" variant="outline">
+            Coming soon
+          </Badge>
+        )}
+      </InlineStack>
+      <Text size="xs" tone="subdued">
+        {tour.duration}
+      </Text>
+    </BlockStack>
+  );
+}

src/components/Learn/ToursLibrary.tsx

@@ -0,0 +1,117 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading, Paragraph, Text } from "@/components/ui/typography";
+import { tracking } from "@/utils/tracking";
+
+import {
+  type Tour,
+  TOUR_DIFFICULTY_BLURBS,
+  TOUR_DIFFICULTY_COLORS,
+  TOUR_DIFFICULTY_ICONS,
+  TOUR_DIFFICULTY_ORDER,
+  type TourDifficulty,
+  tours,
+} from "./tours";
+
+function TourCard({ tour }: { tour: Tour }) {
+  return (
+    <Card className="h-full py-4 gap-2 hover:border-primary/40 hover:shadow-md transition-all duration-200">
+      <CardHeader className="px-4 gap-2">
+        <CardTitle className="text-sm leading-snug">{tour.title}</CardTitle>
+        <CardDescription className="text-sm">
+          {tour.description}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="px-4 mt-auto">
+        <InlineStack gap="3" blockAlign="center" align="space-between">
+          <InlineStack gap="2" blockAlign="center">
+            <Badge size="sm" variant="secondary">
+              {tour.area}
+            </Badge>
+            <Text size="xs" tone="subdued">
+              {tour.duration}
+            </Text>
+          </InlineStack>
+          <Button
+            size="sm"
+            variant="ghost"
+            {...tracking("learning_hub.tours.start", { tour_id: tour.id })}
+          >
+            Start tour
+            <Icon name="Play" size="sm" aria-hidden="true" />
+          </Button>
+        </InlineStack>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DifficultySection({
+  difficulty,
+  tours: difficultyTours,
+}: {
+  difficulty: TourDifficulty;
+  tours: Tour[];
+}) {
+  if (difficultyTours.length === 0) {
+    return null;
+  }
+
+  return (
+    <BlockStack gap="3">
+      <BlockStack gap="1">
+        <InlineStack gap="2" blockAlign="center">
+          <Icon
+            name={TOUR_DIFFICULTY_ICONS[difficulty]}
+            size="md"
+            className={TOUR_DIFFICULTY_COLORS[difficulty]}
+            aria-hidden="true"
+          />
+          <Heading level={3}>{difficulty}</Heading>
+          <Text size="xs" tone="subdued">
+            {difficultyTours.length}{" "}
+            {difficultyTours.length === 1 ? "tour" : "tours"}
+          </Text>
+        </InlineStack>
+        <Paragraph size="sm" tone="subdued">
+          {TOUR_DIFFICULTY_BLURBS[difficulty]}
+        </Paragraph>
+      </BlockStack>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {difficultyTours.map((tour) => (
+          <TourCard key={tour.id} tour={tour} />
+        ))}
+      </div>
+    </BlockStack>
+  );
+}
+
+export function ToursLibrary() {
+  const buckets = new Map<TourDifficulty, Tour[]>();
+  for (const tour of tours) {
+    const list = buckets.get(tour.difficulty) ?? [];
+    list.push(tour);
+    buckets.set(tour.difficulty, list);
+  }
+
+  return (
+    <BlockStack gap="8">
+      {TOUR_DIFFICULTY_ORDER.map((difficulty) => (
+        <DifficultySection
+          key={difficulty}
+          difficulty={difficulty}
+          tours={buckets.get(difficulty) ?? []}
+        />
+      ))}
+    </BlockStack>
+  );
+}