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 ( -
- - - -