Refine card components to be more generic

src/src/app/about/page.tsx

@@ -1,8 +1,7 @@
 import Section from "@/components/shared/Section";
 import React from "react";
 import MarkdownSection from "@/components/shared/MarkdownSection";
-import SmallInfoCard, { SmallInfoCardProps } from "@/components/shared/cards/SmallInfoCard";
-import SmallInfoCardsGridSection from "@/components/shared/cards/SmallInfoCardsSection";
+import { SmallInfoCard, SmallInfoCardProps, SmallInfoCardsSection } from "@/components/cards";
 import { Certification, SkillCategory } from "@/types";
 import { MarkdownPreview } from "@/components/shared/preview";
 import { getCertifications, getDiploma, getExperiences, getProfile, getSkillCategories } from "@/core/data";
@@ -76,7 +75,7 @@ export default function About() {
                     <MarkdownPreview>{diploma.description}</MarkdownPreview>
                 </SmallInfoCard>
             </Section>
-            <SmallInfoCardsGridSection heading="Certifications" items={certifications} />
+            <SmallInfoCardsSection heading="Certifications" items={certifications} />
             <Section heading="Skills">
                 <div className="flex flex-col gap-4">
                     {skillCategories.map((category: SkillCategory) => (

src/src/app/articles/page.tsx

@@ -1,5 +1,5 @@
 import { getAllArticles } from "@/core/articles";
-import ArticleCard from "@/components/shared/cards/ArticleCard";
+import { ArticleCard } from "@/components/cards";
 import EmptyState from "@/components/shared/EmptyState";
 import { Heading1 } from "@/components/shared/typography";
 

src/src/components/cards/ArticleCard.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { Article } from "@/types/article";
+import Card, { CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle } from "./Card";
+import { formatDate } from "@/core/date";
+import IconTag from "@/components/shared/IconTag";
+import { Text } from "@/components/shared/typography";
+
+interface ArticleCardProps {
+    article: Article;
+    showTags?: boolean;
+}
+
+export default function ArticleCard({ article, showTags = false }: ArticleCardProps) {
+    return (
+        <Card as="article" className="flex flex-col gap-3">
+            <CardHeader className="gap-1.5">
+                <CardTitle>
+                    <Link
+                        href={`/articles/${article.slug}`}
+                        className="hover:text-primary-hover transition-colors cursor-pointer"
+                    >
+                        {article.title}
+                    </Link>
+                </CardTitle>
+                <CardSubtitle as="time" dateTime={article.publishedAt} className="mt-1">
+                    {formatDate(article.publishedAt)}
+                </CardSubtitle>
+            </CardHeader>
+            {article.description && (
+                <CardBody className="pt-1">
+                    <Text>{article.description}</Text>
+                </CardBody>
+            )}
+
+            {showTags && article.tags.length > 0 && (
+                <CardFooter className="mt-2">
+                    {article.tags.map((tag) => (
+                        <IconTag key={tag}>{tag}</IconTag>
+                    ))}
+                </CardFooter>
+            )}
+        </Card>
+    );
+}

src/src/components/cards/Card.tsx

@@ -0,0 +1,139 @@
+import type React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Heading3 } from "@/components/shared/typography";
+import { ImageProps } from "@/types";
+
+type PolymorphicProps<E extends React.ElementType> = {
+    as?: E;
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<E>, "as" | "className" | "children">;
+
+type SimpleProps = {
+    className?: string;
+    children?: React.ReactNode;
+};
+
+type CardGridProps = SimpleProps & { columns?: number };
+
+type CardMediaProps = {
+    media: ImageProps;
+    size?: "small" | "medium" | "large" | "full";
+    align?: "center" | "start";
+    className?: string;
+    containerClassName?: string;
+};
+
+type CardLinkProps = {
+    href: string;
+    external?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+
+const baseCardClass = "p-6 bg-surface rounded-3xl border border-border-light shadow-md h-full";
+
+const gridColumns: Record<number, string> = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",
+    6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
+};
+
+const mediaSizes: Record<NonNullable<CardMediaProps["size"]>, string> = {
+    small: "w-1/3",
+    medium: "w-1/2",
+    large: "w-3/4",
+    full: "w-full",
+};
+
+const cn = (...classes: Array<string | undefined | null | false>) => classes.filter(Boolean).join(" ");
+
+const Card = <E extends React.ElementType = "div">({
+    as,
+    className,
+    children,
+    ...props
+}: PolymorphicProps<E>) => {
+    const Component = as ?? "div";
+    return (
+        <Component className={cn(baseCardClass, className)} {...(props as React.ComponentPropsWithoutRef<E>)}>
+            {children}
+        </Component>
+    );
+};
+
+export const CardHeader: React.FC<SimpleProps> = ({ children, className }) => (
+    <div className={cn("flex flex-col gap-2 min-w-0", className)}>{children}</div>
+);
+
+export const CardTitle: React.FC<SimpleProps> = ({ children, className }) => (
+    <Heading3 className={cn("leading-tight", className)}>{children}</Heading3>
+);
+
+export const CardSubtitle: React.FC<PolymorphicProps<React.ElementType>> = ({ as, children, className, ...props }) => {
+    const Component = (as as React.ElementType) ?? "p";
+    return (
+        <Component className={cn("text-base text-text-muted", className)} {...props}>
+            {children}
+        </Component>
+    );
+};
+
+export const CardBody: React.FC<SimpleProps> = ({ children, className }) => (
+    <div className={cn("flex flex-col gap-2", className)}>{children}</div>
+);
+
+export const CardFooter: React.FC<SimpleProps> = ({ children, className }) => (
+    <div className={cn("mt-4 flex flex-wrap gap-2 justify-start items-start", className)}>{children}</div>
+);
+
+export const CardMedia: React.FC<CardMediaProps> = ({
+    media,
+    size = "medium",
+    align = "center",
+    className,
+    containerClassName,
+}) => (
+    <div
+        className={cn(
+            "flex justify-center",
+            align === "start" ? "items-start" : "items-center",
+            containerClassName,
+        )}
+    >
+        <Image
+            src={media.src}
+            alt={media.alt}
+            width={media.width}
+            height={media.height}
+            className={cn("object-contain", mediaSizes[size], className)}
+        />
+    </div>
+);
+
+export const CardGrid: React.FC<CardGridProps> = ({ columns = 3, className, children }) => (
+    <div className={cn("grid gap-4", gridColumns[columns] ?? gridColumns[3], className)}>{children}</div>
+);
+
+export const CardLink: React.FC<CardLinkProps> = ({ href, external = false, className, children }) => {
+    const linkClass = cn(
+        "block h-full transition-opacity hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+    );
+
+    return external ? (
+        <a href={href} target="_blank" rel="noreferrer" className={linkClass}>
+            {children}
+        </a>
+    ) : (
+        <Link href={href} className={linkClass}>
+            {children}
+        </Link>
+    );
+};
+
+export default Card;

src/src/components/shared/cards/SmallInfoCard.tsx → src/src/components/cards/SmallInfoCard.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import SmallInfoCardImage, { SmallInfoCardImageSize, SmallInfoCardImagePosition } from "./SmallInfoCardImage";
-import SmallInfoCardHeading from "@/components/shared/cards/SmallInfoCardHeading";
-import Card from "./Card";
+import Card, { CardBody, CardFooter, CardMedia } from "./Card";
+import SmallInfoCardHeading from "./SmallInfoCardHeading";
 import { Secondary, Text } from "@/components/shared/typography";
 import { ImageProps } from "@/types";
 import { createId } from "@/core/string";
 
+export type SmallInfoCardImageSize = "small" | "medium" | "large";
+export type SmallInfoCardImagePosition = "center" | "start";
+
 export type SmallInfoCardProps = {
     image?: ImageProps;
     heading: string;
     subtitle?: string | React.ReactNode;
     details?: Array<string | React.ReactNode>;
     tooltip?: string;
     children?: React.ReactNode;
     imageSize?: SmallInfoCardImageSize;
     imagePosition?: SmallInfoCardImagePosition;
@@ -19,6 +21,18 @@
     id?: string;
 };
 
+const mediaSizeClasses: Record<SmallInfoCardImageSize, string> = {
+    small: "w-10 h-10 md:w-16 md:h-16",
+    medium: "w-16 h-16 md:w-20 md:h-20",
+    large: "w-20 h-20 md:w-24 md:h-24",
+};
+
+const mediaContainerClass = (imageSize: SmallInfoCardImageSize, imagePosition: SmallInfoCardImagePosition) => {
+    const positionClass = imagePosition === "start" ? "items-start mt-1 mr-4" : "items-center";
+    const sizeClass = imageSize !== "medium" && imagePosition !== "start" ? "mt-1 mr-4" : "";
+    return ["flex shrink-0 justify-center", positionClass, sizeClass].filter(Boolean).join(" ");
+};
+
 const SmallInfoCard: React.FC<SmallInfoCardProps> = ({
     image,
     heading,
@@ -30,31 +44,42 @@
     id,
     flex = "row",
 }) => {
-    const isMediumSize = imageSize === "medium";
-    const isStartPosition = imagePosition === "start";
+    const cardId = id ?? createId(heading);
     const bodyFlexDirectionClass = flex === "row" ? "flex-row" : "flex-col";
 
     const containerClass = [
-        "flex w-full mx-auto min-w-0",
-        isMediumSize && !isStartPosition ? "gap-4 items-stretch" : "items-stretch",
-    ].join(" ");
-
-    const cardId = id ?? createId(heading);
+        "flex w-full mx-auto min-w-0 items-stretch",
+        imageSize === "medium" && imagePosition !== "start" ? "gap-4" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
 
     return (
         <Card id={cardId} className="scroll-mt-24">
             <div className={containerClass}>
-                {image && <SmallInfoCardImage image={image} imageSize={imageSize} imagePosition={imagePosition} />}
+                {image && (
+                    <CardMedia
+                        media={image}
+                        size="medium"
+                        align={imagePosition}
+                        containerClassName={mediaContainerClass(imageSize, imagePosition)}
+                        className={mediaSizeClasses[imageSize]}
+                    />
+                )}
                 <div className="flex flex-col flex-1 min-w-0">
                     <SmallInfoCardHeading>{heading}</SmallInfoCardHeading>
                     {subtitle && <Text className="whitespace-nowrap overflow-hidden text-ellipsis">{subtitle}</Text>}
                     {details?.map((detail, idx) => (
                         <Secondary key={idx} className="whitespace-nowrap overflow-hidden text-ellipsis">
                             {detail}
                         </Secondary>
                     ))}
                     {children && (
-                        <div className={`mt-4 flex ${bodyFlexDirectionClass} gap-2 justify-start flex-1 min-w-0`}>{children}</div>
+                        <CardFooter
+                            className={`mt-4 flex ${bodyFlexDirectionClass} gap-2 justify-start items-start flex-1 min-w-0`}
+                        >
+                            {children}
+                        </CardFooter>
                     )}
                 </div>
             </div>

src/src/components/shared/cards/SmallInfoCardsSection.tsx → src/src/components/cards/SmallInfoCardsSection.tsx

@@ -1,16 +1,17 @@
 import React from "react";
-import { SmallInfoCard, SmallInfoCardProps } from "@/components/shared/cards";
+import { CardGrid } from "./Card";
+import SmallInfoCard, { SmallInfoCardProps } from "./SmallInfoCard";
 import Section from "@/components/shared/Section";
 
 type SmallInfoCardsSectionProps = { heading: string; items: SmallInfoCardProps[] };
 
 const SmallInfoCardsGridSection: React.FC<SmallInfoCardsSectionProps> = ({ heading, items }) => (
     <Section heading={heading}>
-        <div className="grid gap-4 mt-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-2">
+        <CardGrid columns={2} className="mt-4">
             {items.map((item, index) => (
                 <SmallInfoCard key={index} {...item} />
             ))}
-        </div>
+        </CardGrid>
     </Section>
 );
 

src/src/components/cards/ThumbnailCard.tsx

@@ -0,0 +1,37 @@
+import { ImageProps } from "@/types";
+import Card, { CardBody, CardMedia, CardTitle } from "./Card";
+import { Text } from "@/components/shared/typography";
+
+export type ThumbnailCardImageSize = "small" | "medium" | "large" | "full";
+
+export type ThumbnailCardProps = {
+    title: string;
+    description?: string;
+    image?: ImageProps;
+    size?: ThumbnailCardImageSize;
+};
+
+const sizeClasses = { small: "w-1/4", medium: "w-1/2", large: "w-3/4", full: "w-full" };
+
+const ThumbnailCard: React.FC<ThumbnailCardProps> = ({ title, description, image, size = "medium" }) => {
+    return (
+        <Card>
+            <div className="flex items-center flex-col h-full">
+                {image && (
+                    <CardMedia
+                        media={image}
+                        size={size}
+                        containerClassName="shrink-0 flex items-center justify-center mb-4"
+                        className={sizeClasses[size]}
+                    />
+                )}
+                <CardBody className="items-center justify-center grow text-center">
+                    <CardTitle className="text-center leading-tight">{title}</CardTitle>
+                    {description && <Text className="text-center mt-3 text-sm">{description}</Text>}
+                </CardBody>
+            </div>
+        </Card>
+    );
+};
+
+export default ThumbnailCard;

src/src/components/cards/index.ts

@@ -0,0 +1,18 @@
+export { default as ArticleCard } from "./ArticleCard";
+export { default as SmallInfoCard } from "./SmallInfoCard";
+export type { SmallInfoCardProps } from "./SmallInfoCard";
+export { default as SmallInfoCardHeading } from "./SmallInfoCardHeading";
+export { default as SmallInfoCardsSection } from "./SmallInfoCardsSection";
+export { default as ThumbnailCard } from "./ThumbnailCard";
+export type { ThumbnailCardImageSize, ThumbnailCardProps } from "./ThumbnailCard";
+export {
+    default as Card,
+    CardBody,
+    CardFooter,
+    CardGrid,
+    CardHeader,
+    CardLink,
+    CardMedia,
+    CardSubtitle,
+    CardTitle,
+} from "./Card";

src/src/components/home/FeaturedArticles.tsx

@@ -1,6 +1,6 @@
 import { getFeaturedArticles } from "@/core/articles";
 import Section from "@/components/shared/Section";
-import ArticleCard from "@/components/shared/cards/ArticleCard";
+import { ArticleCard } from "@/components/cards";
 import EmptyState from "@/components/shared/EmptyState";
 
 export default function FeaturedArticles() {