diff --git a/src/components/Learn/TipOfTheDay.tsx b/src/components/Learn/TipOfTheDay.tsx
index 2c1bc3e8f..21b543058 100644
--- a/src/components/Learn/TipOfTheDay.tsx
+++ b/src/components/Learn/TipOfTheDay.tsx
@@ -4,50 +4,81 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Heading, Paragraph } from "@/components/ui/typography";
+import { Heading, Text } from "@/components/ui/typography";
import { tracking } from "@/utils/tracking";
-const STUB_TIP = {
- id: "subgraph-navigation",
- category: "Editor",
- title: "Use subgraphs to keep complex pipelines readable",
- body: "Double-click any task to dive into its subgraph. Use the breadcrumbs at the top of the editor to navigate back up — perfect for organising large pipelines without clutter.",
-};
+import { tips } from "./tips";
+
+function getDayOfYear(date: Date) {
+ const start = Date.UTC(date.getUTCFullYear(), 0, 0);
+
+ const now = Date.UTC(
+ date.getUTCFullYear(),
+ date.getUTCMonth(),
+ date.getUTCDate(),
+ );
+
+ return Math.floor((now - start) / 86_400_000);
+}
+
+interface TipOfTheDayProps {
+ variant?: "card" | "compact";
+}
+
+export function TipOfTheDay({ variant = "card" }: TipOfTheDayProps = {}) {
+ const index = getDayOfYear(new Date()) % tips.length;
+ const tip = tips[index];
+ const isCompact = variant === "compact";
+ const textSize = isCompact ? "xs" : "sm";
+
+ const badge = (
+
+ {tip.category}
+
+ );
-export function TipOfTheDay() {
return (
-
-
-
-
-
- Tip of the day
+
+
+ {!isCompact && (
+
+
+
+ Tip of the day
+
+ {badge}
-
- {STUB_TIP.category}
-
-
+ )}
-
- {STUB_TIP.title}
-
-
- {STUB_TIP.body}
-
+
+
+ {tip.title}
+
+ {isCompact && badge}
+
+
+ {tip.body}
+
-
+