refactor/feat(ui): ui/card and ui/tag component refactors

app/[locale]/apps/[application]/page.tsx

@@ -368,7 +368,7 @@ const Page = async ({
                       <AppCard
                         app={relatedApp}
                         imageSize={24}
-                        showDescription={true}
+                        showDescription
                         hoverClassName="hover:bg-background-highlight/50"
                         matomoCategory="detail"
                         matomoAction="more_apps"

app/[locale]/apps/_components/AppCard.tsx

@@ -2,13 +2,15 @@ import { AppData } from "@/lib/types"
 
 import { Image } from "@/components/Image"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
-import { Tag } from "@/components/ui/tag"
+import { Tag, TagsInlineText } from "@/components/ui/tag"
 import TruncatedText from "@/components/ui/TruncatedText"
 
 import { APP_TAG_VARIANTS } from "@/lib/utils/apps"
 import { cn } from "@/lib/utils/cn"
 import { slugify } from "@/lib/utils/url"
 
+import { SIZE_CLASS_MAPPING } from "@/lib/constants"
+
 interface AppCardProps {
   app: AppData
   imageSize: number
@@ -19,7 +21,6 @@ interface AppCardProps {
   hoverClassName?: string
   matomoCategory: string
   matomoAction: string
-  forceLightMode?: boolean
 }
 
 const AppCard = ({
@@ -32,39 +33,24 @@ const AppCard = ({
   hoverClassName,
   matomoCategory,
   matomoAction,
-  forceLightMode = false,
 }: AppCardProps) => {
   const cardContent = (
     <div
       className={cn(
         "flex text-body",
         isVertical ? "flex-col gap-3" : "flex-row gap-3"
       )}
-      style={
-        forceLightMode
-          ? ({
-              "--body": "var(--gray-900)",
-              "--body-medium": "var(--gray-500)",
-              "--body-light": "var(--gray-200)",
-              "--background": "var(--white)",
-              "--background-highlight": "var(--gray-50)",
-              "--primary": "var(--purple-600)",
-              "--primary-high-contrast": "var(--purple-800)",
-              "--primary-low-contrast": "var(--purple-100)",
-            } as React.CSSProperties)
-          : undefined
-      }
     >
       <div
         className={cn(
           "flex overflow-hidden rounded-xl",
-          `w-${imageSize} h-${imageSize}`
+          SIZE_CLASS_MAPPING[imageSize]
         )}
       >
         <Image
           src={app.image}
           alt={app.name}
-          className="h-full w-full rounded-xl object-contain"
+          className="size-full rounded-xl object-contain"
           width={imageSize * 16}
           height={imageSize * 16}
         />
@@ -93,9 +79,7 @@ const AppCard = ({
             }}
           />
         )}
-        <p className="text-sm text-body-medium">
-          {app.subCategory.map((subCategory) => subCategory).join(" ·  ")}
-        </p>
+        <TagsInlineText list={app.subCategory} variant="light" />
       </div>
     </div>
   )

app/[locale]/apps/_components/TopApps.tsx

@@ -143,7 +143,7 @@ const TopApps = ({ appsData }: TopAppsProps) => {
                       app={app}
                       imageSize={imageSize}
                       isVertical={isVertical}
-                      hideTag={true}
+                      hideTag
                       matomoCategory="apps"
                       matomoAction="top_apps"
                     />

app/[locale]/apps/page.tsx

@@ -101,7 +101,7 @@ const Page = async ({ params }: { params: PageParams }) => {
                   key={app.name}
                   app={app}
                   imageSize={24}
-                  showDescription={true}
+                  showDescription
                   matomoCategory="apps"
                   matomoAction="staff"
                 />

app/[locale]/developers/page.tsx

@@ -9,9 +9,16 @@ import FeedbackCard from "@/components/FeedbackCard"
 import HubHero from "@/components/Hero/HubHero"
 import { CheckCircle } from "@/components/icons/CheckCircle"
 import { Image } from "@/components/Image"
+import CardImage from "@/components/Image/CardImage"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Card } from "@/components/ui/card"
+import {
+  Card,
+  CardBanner,
+  CardContent,
+  CardParagraph,
+  CardTitle,
+} from "@/components/ui/card"
 import {
   EdgeScrollContainer,
   EdgeScrollItem,
@@ -23,12 +30,12 @@ import { Section } from "@/components/ui/section"
 
 import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
+import { formatDateRange } from "@/lib/utils/date"
 import { getMetadata } from "@/lib/utils/metadata"
 import { screens } from "@/lib/utils/screen"
 
 import BuilderCard from "./_components/BuilderCard"
 import BuilderSwiper from "./_components/BuilderSwiper/lazy"
-import HackathonCard from "./_components/HackathonCard"
 import SpeedRunCard from "./_components/SpeedRunCard"
 import VideoCourseCard from "./_components/VideoCourseCard"
 import VideoCourseSwiper from "./_components/VideoCourseSwiper/lazy"
@@ -40,8 +47,8 @@ import scaffoldDebugScreenshot from "@/public/images/developers/scaffold-debug-s
 import stackExchangeScreenshot from "@/public/images/developers/stack-exchange-screenshot.png"
 import tutorialTagsBanner from "@/public/images/developers/tutorial-tags-banner.png"
 import dogeImage from "@/public/images/doge-computer.png"
+import EventFallback from "@/public/images/events/event-placeholder.png"
 import heroImage from "@/public/images/heroes/developers-hub-hero.png"
-
 const H3 = (props: ChildOnlyProp) => <h3 className="mb-8 mt-10" {...props} />
 
 const Text = (props: ChildOnlyProp) => <p className="mb-6" {...props} />
@@ -531,19 +538,53 @@ const DevelopersPage = async ({ params }: { params: PageParams }) => {
             <p>{t("page-developers-hackathons-desc")}</p>
 
             <EdgeScrollContainer>
-              {hackathons.map((event) => (
-                <EdgeScrollItem
-                  key={event.id}
-                  asChild
-                  className="ms-6 w-[calc(100%-4rem)] max-w-md md:min-w-96 md:flex-1 lg:max-w-[33%]"
-                >
-                  <HackathonCard
+              {hackathons.map((event) => {
+                const {
+                  title,
+                  link,
+                  bannerImage,
+                  location,
+                  startTime,
+                  endTime,
+                } = event
+
+                return (
+                  <EdgeScrollItem
                     key={event.id}
-                    event={event}
-                    className="min-w-72 max-w-md flex-1"
-                  />
-                </EdgeScrollItem>
-              ))}
+                    asChild
+                    className="ms-6 w-[calc(100%-4rem)] max-w-md md:min-w-96 md:flex-1 lg:max-w-[33%]"
+                  >
+                    <Card
+                      href={link}
+                      customEventOptions={{
+                        eventCategory: "hackathons",
+                        eventAction: "click",
+                        eventName: title,
+                      }}
+                      className="min-w-72 max-w-md flex-1"
+                    >
+                      <CardBanner className="h-36">
+                        {bannerImage ? (
+                          <CardImage src={bannerImage} />
+                        ) : (
+                          <Image src={EventFallback} alt="" sizes="276px" />
+                        )}
+                      </CardBanner>
+                      <CardContent>
+                        <CardTitle>{title}</CardTitle>
+                        <CardParagraph variant="subtitle" size="sm">
+                          {formatDateRange(startTime, endTime, locale, {
+                            year: "numeric",
+                          })}
+                        </CardParagraph>
+                        <CardParagraph variant="subtitle" size="sm">
+                          {location}
+                        </CardParagraph>
+                      </CardContent>
+                    </Card>
+                  </EdgeScrollItem>
+                )
+              })}
             </EdgeScrollContainer>
 
             <div className="flex justify-center">

app/[locale]/page.tsx

@@ -44,8 +44,7 @@ import {
   Card,
   CardBanner,
   CardContent,
-  CardHighlight,
-  CardSubTitle,
+  CardParagraph,
   CardTitle,
 } from "@/components/ui/card"
 import InlineLink from "@/components/ui/Link"
@@ -863,7 +862,7 @@ const Page = async ({ params }: { params: PageParams }) => {
                         eventName: title,
                       }}
                     >
-                      <CardBanner>
+                      <CardBanner background="accent-b">
                         {bannerImage ? (
                           <CardImage
                             src={bannerImage}
@@ -875,13 +874,15 @@ const Page = async ({ params }: { params: PageParams }) => {
                       </CardBanner>
                       <CardContent>
                         <CardTitle>{title}</CardTitle>
-                        <CardSubTitle>
+                        <CardParagraph variant="subtitle" size="sm">
                           {formatDateRange(startTime, endTime, locale, {
                             month: "long",
                             year: "numeric",
                           })}
-                        </CardSubTitle>
-                        <CardHighlight>{location}</CardHighlight>
+                        </CardParagraph>
+                        <CardParagraph variant="uppercase">
+                          {location}
+                        </CardParagraph>
                       </CardContent>
                     </Card>
                   )

app/[locale]/trillion-dollar-security/page.tsx

@@ -9,8 +9,8 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
+  CardParagraph,
 } from "@/components/ui/card"
 import InlineLink, { BaseLink as Link } from "@/components/ui/Link"
 
@@ -26,13 +26,13 @@ const ReportCard = ({ cta, altText }: { cta: string; altText: string }) => {
   return (
     <Card className="rounded-2xl border bg-card-gradient p-8 shadow dark:bg-gradient-to-br dark:from-white/0 dark:to-purple-500/10">
       <CardContent className="p-0 pb-4">
-        <CardDescription>
+        <CardParagraph variant="light" size="sm">
           <Image
             src={TdsReport}
             alt={altText}
             className="w-full object-contain"
           />
-        </CardDescription>
+        </CardParagraph>
       </CardContent>
       <CardFooter className="justify-center p-0">
         <ButtonLink size="lg" href="/reports/trillion-dollar-security.pdf">

src/components/AreaChart/index.tsx

@@ -11,9 +11,9 @@ import {
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
+  CardParagraph,
   CardTitle,
 } from "@/components/ui/card"
 import {
@@ -66,7 +66,11 @@ export function AreaChart({
     <Card>
       <CardHeader>
         {title && <CardTitle>{title}</CardTitle>}
-        {description && <CardDescription>{description}</CardDescription>}
+        {description && (
+          <CardParagraph variant="light" size="sm">
+            {description}
+          </CardParagraph>
+        )}
       </CardHeader>
       <CardContent>
         <ChartContainer config={defaultChartConfig}>

src/components/BarChart/index.tsx

@@ -11,9 +11,9 @@ import {
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
+  CardParagraph,
   CardTitle,
 } from "@/components/ui/card"
 import {
@@ -66,7 +66,11 @@ export function BarChart({
     <Card>
       <CardHeader>
         {title && <CardTitle>{title}</CardTitle>}
-        {description && <CardDescription>{description}</CardDescription>}
+        {description && (
+          <CardParagraph variant="light" size="sm">
+            {description}
+          </CardParagraph>
+        )}
       </CardHeader>
       <CardContent>
         <ChartContainer config={defaultChartConfig}>