update cards to new style

Author: hasparus

src/components/cards.tsx

@@ -1,45 +1,82 @@
-import { ReactElement } from "react"
-import { Card } from "./card"
 import { clsx } from "clsx"
-import NextLink from "next/link"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { learnPages } from "./learn-aggregator/learn-pages"
 
 export function Cards({
   items,
+  numbered = false,
 }: {
   items: {
-    icon: ReactElement
+    icon?: (({ className }: { className?: string }) => React.ReactNode) | React.ReactNode
     title: string
     description?: string
     link: string
   }[]
+  numbered?: boolean
 }) {
   return (
-    <div className="mt-6 grid grid-cols-2 gap-4">
-      {items.map(({ icon: Icon, title, link, description }) => {
-        const isExternal = link.startsWith("https://")
+    <ul className="grid grid-cols-1 justify-stretch gap-2 pt-6 sm:grid-cols-2 lg:gap-4">
+      {items.map((item, index) => {
+        // Try to get section from learn-pages
+        let section: "getting-started" | "best-practices" | undefined
+
+        const path = item.link.replace(/^\/learn\//, "").replace(/\/$/, "")
+        const learnPage = learnPages[path as keyof typeof learnPages]
+        if (learnPage) {
+          section = learnPage.section
+        }
+
         return (
-          <Card
-            key={title}
-            as={isExternal ? "a" : NextLink}
-            // @ts-expect-error
-            href={link}
-            className={clsx(
-              "flex flex-col items-center",
-              isExternal &&
-                "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
-            )}
-          >
-            {/* @ts-expect-error */}
-            {typeof Icon === "function" ? <Icon className="h-12" /> : Icon}
-            <b className="mb-2 mt-4 text-center text-lg">{title}</b>
-            <span
-              className={`text-xs md:text-sm text-center${description ? "" : "break-all"}`}
+          <li key={item.title} className="flex text-neu-900">
+            <a
+              href={item.link}
+              className={clsx(
+                "gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'header''desc'] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'header_header''desc_arrow'] lg:[grid-template-columns:1fr_64px]",
+                section === "getting-started" &&
+                  "bg-pri-lighter/10 dark:bg-pri-lighter/5",
+                section === "best-practices" &&
+                  "bg-sec-lighter/10 dark:bg-sec-lighter/5",
+              )}
             >
-              {description ? description : link.replace(/^https?:\/\//, "")}
-            </span>
-          </Card>
+              <span className="flex flex-col gap-1 [grid-area:header]">
+                {numbered && (
+                  <span className="typography-body-sm px-2 pt-2 text-neu-700 max-lg:typography-body-md lg:px-4 lg:pt-4">
+                    Lesson {index + 1}
+                  </span>
+                )}
+                <span
+                  className={clsx(
+                    "typography-h3 flex items-center gap-2 border-neu-200 text-neu-900 dark:border-neu-100",
+                    item.icon ? "border-b" : "pl-2 lg:pl-4",
+                  )}
+                >
+                  {item.icon && (
+                    <span className="flex items-center justify-center border-r border-neu-200 p-2 lg:p-4">
+                      {typeof item.icon === "function" ? <item.icon className="size-8 shrink-0" /> : item.icon}
+                    </span>
+                  )}
+                  {item.title}
+                </span>
+              </span>
+
+              <p className="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">
+                {item.description
+                  ? item.description
+                  : item.link.replace(/^https?:\/\//, "")}
+              </p>
+
+              <span
+                className={clsx(
+                  "hidden items-center justify-center place-self-end border-l border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex",
+                  item.icon ? "h-full" : "border-t",
+                )}
+              >
+                <ArrowDownIcon className="size-8 shrink-0 -rotate-90" />
+              </span>
+            </a>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }