- {item.author} + {messages.showcaseItems.madeBy.replace("{author}", item.author)}
{item.description && (diff --git a/src/components/mdx/Callout.tsx b/src/components/mdx/Callout.tsx index 67596dc1..25e5b084 100644 --- a/src/components/mdx/Callout.tsx +++ b/src/components/mdx/Callout.tsx @@ -1,8 +1,11 @@ +"use client"; + import { ReactNode } from "react"; -import { Info, AlertTriangle, XCircle, CheckCircle } from "lucide-react"; +import { Info, AlertTriangle, XCircle, CheckCircle, GraduationCap} from "lucide-react"; +import { useMessages } from "@/lib/hooks/useMessages"; interface CalloutProps { - type?: "info" | "warning" | "danger" | "success"; + type?: "info" | "warning" | "danger" | "success"| "lvl_beginner" | "lvl_intermediate" | "lvl_advanced" ; title?: string; children: ReactNode; } @@ -15,6 +18,9 @@ const styles = { "bg-red-50 dark:bg-red-950/50 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100", success: "bg-green-50 dark:bg-green-950/50 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100", + lvl_beginner: "bg-emerald-50 dark:bg-emerald-950/50 border-emerald-300 dark:border-emerald-700 text-emerald-900 dark:text-emerald-100", + lvl_intermediate: "bg-amber-50 dark:bg-amber-950/50 border-amber-300 dark:border-amber-700 text-amber-900 dark:text-amber-100", + lvl_advanced: "bg-rose-50 dark:bg-rose-950/50 border-rose-300 dark:border-rose-700 text-rose-900 dark:text-rose-100", }; const icons = { @@ -22,16 +28,24 @@ const icons = { warning: AlertTriangle, danger: XCircle, success: CheckCircle, -}; - -const defaultTitles = { - info: "Info", - warning: "Warning", - danger: "Danger", - success: "Success", + lvl_beginner: GraduationCap, + lvl_intermediate: GraduationCap, + lvl_advanced: GraduationCap }; export function Callout({ type = "info", title, children }: CalloutProps) { + const messages = useMessages(); + + const defaultTitles = { + info: messages.callout.defaultTitles.info, + warning: messages.callout.defaultTitles.warning, + danger: messages.callout.defaultTitles.danger, + success: messages.callout.defaultTitles.success, + lvl_beginner: messages.callout.defaultTitles.lvl_beginner, + lvl_intermediate: messages.callout.defaultTitles.lvl_intermediate, + lvl_advanced: messages.callout.defaultTitles.lvl_advanced, + }; + const Icon = icons[type]; const displayTitle = title || defaultTitles[type]; diff --git a/src/lib/hooks/useMessages.ts b/src/lib/hooks/useMessages.ts index 10f2ec7f..8220117a 100644 --- a/src/lib/hooks/useMessages.ts +++ b/src/lib/hooks/useMessages.ts @@ -1,3 +1,5 @@ +"use client"; + import { useParams } from "next/navigation"; import { getMessages, Messages } from "../locale"; import { deepMerge } from "../utils";