docs: update recipes to be based on v2 (#7516)

www/packages/docs-ui/src/components/Card/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ArrowUpRightOnBox } from "@medusajs/icons"
 import clsx from "clsx"
-import { Link } from "@/components"
+import { Badge, BadgeProps, Link } from "@/components"
 
 export type CardProps = {
   startIcon?: React.ReactNode
@@ -14,6 +14,7 @@ export type CardProps = {
   children?: React.ReactNode
   showLinkIcon?: boolean
   isExternal?: boolean
+  badge?: BadgeProps
 }
 
 export const Card = ({
@@ -27,6 +28,7 @@ export const Card = ({
   children,
   showLinkIcon = true,
   isExternal = false,
+  badge,
 }: CardProps) => {
   return (
     <div
@@ -43,8 +45,11 @@ export const Card = ({
       <div className="flex items-start gap-docs_1 justify-between flex-1">
         <div className={clsx("flex flex-col", contentClassName)}>
           {title && (
-            <span className="text-compact-medium-plus text-medusa-fg-base">
-              {title}
+            <span className={clsx(badge && "flex gap-docs_0.5")}>
+              <span className="text-compact-medium-plus text-medusa-fg-base">
+                {title}
+              </span>
+              {badge && <Badge {...badge} />}
             </span>
           )}
           {text && (

www/packages/docs-ui/src/components/CardList/index.tsx

@@ -5,9 +5,10 @@ import clsx from "clsx"
 type CardListProps = {
   items: CardProps[]
   itemsPerRow?: number
+  className?: string
 }
 
-export const CardList = ({ items, itemsPerRow }: CardListProps) => {
+export const CardList = ({ items, itemsPerRow, className }: CardListProps) => {
   if (!itemsPerRow) {
     // if length of items is even, set to `2`, else set to `3`
     itemsPerRow = items.length === 1 ? 0 : items.length % 2 === 0 ? 2 : 3
@@ -18,7 +19,8 @@ export const CardList = ({ items, itemsPerRow }: CardListProps) => {
         "grid gap-x-docs_1 auto-rows-fr gap-y-docs_1",
         itemsPerRow === 1 && "grid-cols-1",
         itemsPerRow === 2 && "md:grid-cols-2 grid-cols-1",
-        itemsPerRow === 3 && "lg:grid-cols-3 md:grid-col-2 grid-cols-1"
+        itemsPerRow === 3 && "lg:grid-cols-3 md:grid-col-2 grid-cols-1",
+        className
       )}
     >
       {items.map((item, key) => (