Unified ColGrid component, VersionConditional adjustments

Author: mateuszbartosik

src/components/ColGrid.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export type GridColCount = 1 | 2 | 3;
+
+export interface ColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    colCount: GridColCount;
+}
+
+function getGridColsClass(colCount: GridColCount): string {
+    if (colCount === 1) {
+        return "grid grid-cols-1";
+    }
+    if (colCount === 2) {
+        return "grid grid-cols-1 sm:grid-cols-2";
+    }
+    if (colCount === 3) {
+        return "grid grid-cols-1 xl:grid-cols-3";
+    }
+    return "";
+}
+
+export default function ColGrid({
+    children,
+    className = "",
+    colCount = 1,
+    ...props
+}: ColGridProps) {
+    return (
+        <div
+            className={clsx(getGridColsClass(colCount), "gap-4", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}

src/components/Common/CardWithImageHorizontal.tsx

@@ -6,51 +6,54 @@ import Badge from "@site/src/components/Common/Badge";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 
 export interface CardWithImageHorizontalProps {
-  title: string;
-  description: ReactNode;
-  imgSrc: string;
-  imgAlt?: string;
-  url?: string;
-  buttonVariant?: ButtonVariant;
-  ctaLabel?: string;
-  iconName?: IconName;
+    title: string;
+    description: ReactNode;
+    imgSrc: string;
+    imgAlt?: string;
+    url?: string;
+    buttonVariant?: ButtonVariant;
+    ctaLabel?: string;
+    iconName?: IconName;
 }
 
 export default function CardWithImageHorizontal({
-  title,
-  description,
-  imgSrc,
-  imgAlt = "",
-  url,
-  buttonVariant = "secondary",
-  ctaLabel = "Read now",
-  iconName,
+    title,
+    description,
+    imgSrc,
+    imgAlt = "",
+    url,
+    buttonVariant = "secondary",
+    ctaLabel = "Read now",
 }: CardWithImageHorizontalProps) {
-  return (
-    <div className="card group !grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className="aspect-[400/209] overflow-hidden rounded-xl relative flex items-center">
-        <img
-          src={imgSrc}
-          alt={imgAlt}
-          className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
-        />
-        {url && !isInternalUrl(url) && (
-          <Badge className="absolute top-2 right-2" variant="default" size="sm">
-            External
-          </Badge>
-        )}
-      </div>
-      <div className="flex flex-col min-w-0 justify-center gap-1">
-        <Heading as="h4" className="!mb-1">
-          {title}
-        </Heading>
-        <p className="!mb-3 text-sm">{description}</p>
-        {url && (
-          <Button variant={buttonVariant} url={url}>
-            {ctaLabel}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
+    return (
+        <div className="card group !grid grid-cols-1 xl:grid-cols-[minmax(10rem,_230px)_1fr] 2xl:grid-cols-[minmax(10rem,_270px)_1fr] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
+            <div className="aspect-[537/281] overflow-hidden rounded-xl relative flex items-center">
+                <img
+                    src={imgSrc}
+                    alt={imgAlt}
+                    className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
+                />
+                {url && !isInternalUrl(url) && (
+                    <Badge
+                        className="absolute top-2 right-2"
+                        variant="default"
+                        size="sm"
+                    >
+                        External
+                    </Badge>
+                )}
+            </div>
+            <div className="flex flex-col min-w-0 justify-center gap-1">
+                <Heading as="h4" className="!mb-1">
+                    {title}
+                </Heading>
+                <p className="!mb-3 text-sm">{description}</p>
+                {url && (
+                    <Button variant={buttonVariant} url={url}>
+                        {ctaLabel}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

src/components/OneColGrid.tsx

@@ -2,20 +2,24 @@ import { ReactNode } from "react";
 import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
 
 interface VersionConditionalProps {
-  minimumVersion: string;
-  children: ReactNode;
+    minimumVersion: string;
+    children: ReactNode;
 }
 
 export default function VersionConditional({
-  minimumVersion,
-  children,
+    minimumVersion,
+    children,
 }: VersionConditionalProps) {
-  const pluginId = "default";
-  const { activeVersion } = useActiveDocContext(pluginId);
+    const pluginId = "default";
+    const { activeVersion } = useActiveDocContext(pluginId);
 
-  if (minimumVersion > activeVersion.label) {
-    return null;
-  }
+    if (
+        activeVersion.label.localeCompare(minimumVersion, undefined, {
+            numeric: true,
+        }) < 0
+    ) {
+        return null;
+    }
 
-  return <>{children}</>;
-}
+    return <>{children}</>;
+}