Code adjustments

Author: monikaksiaz

src/components/Common/Badge.tsx

@@ -13,12 +13,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
-  default: "bg-primary-light/80 backdrop-blur-xs !text-white rounded border border-primary/10",
-  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black rounded border border-gray-300/10 dark:border-secondary/10",
-  outline: "bg-stone-100/30 backdrop-blur-xs text-black rounded border border-black/70",
-  success: "bg-green-300/80 backdrop-blur-xs text-green-950 rounded border border-green-400/10",
-  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 rounded border border-orange-400/10",
-  destructive: "bg-red-300/80 bacdrop-blur-xs text-red-950 rounded border border-red-400/10",
+  default: "bg-primary-light/80 backdrop-blur-xs text-white border border-primary/10 dark:text-black",
+  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black border border-gray-300/10 dark:border-secondary/10",
+  outline: "bg-stone-100/30 backdrop-blur-xs text-black border border-black/70",
+  success: "bg-green-300/80 backdrop-blur-xs text-green-950 border border-green-400/10",
+  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 border border-orange-400/10",
+  destructive: "bg-red-300/80 backdrop-blur-xs text-red-950 border border-red-400/10",
 }
 
 const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {

src/components/Common/Button.tsx

@@ -5,17 +5,25 @@ import { IconName } from "@site/src/typescript/iconName";
 import { Icon } from "./Icon";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 
+export type ButtonVariant =
+| "default"
+| "outline" 
+| "ghost" 
+| "destructive" 
+| "secondary";
+
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   url?: string;
   className?: string;
-  variant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  variant?: ButtonVariant;
   size?: "sm" | "md" | "lg";
   iconName?: IconName;
 }
 
-const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
+const variantClasses: Record<ButtonVariant, string> = {
   default: "bg-primary !text-white dark:!text-black hover:bg-primary-darker",
   secondary: "bg-gray-300 hover:bg-gray-400 dark:bg-secondary !text-black dark:hover:bg-secondary-darker",
   outline:
@@ -49,14 +57,14 @@ export default function Button({
   );
 
   if (url) {
-    const external = !isInternalUrl(url);
+    const isExternal = !isInternalUrl(url);
     return (
       <Link
-        {...(external ? { href: url } : { to: url })}
+        {...(isExternal ? { href: url } : { to: url })}
         className={baseClasses}
       >
         {children} {iconName && <Icon icon={iconName} />}
-        {external && <Icon icon="newtab" className="ml-2" size="xs"/>}
+        {isExternal && <Icon icon="newtab" className="ml-2" size="xs"/>}
       </Link>
     );
   }

src/components/Common/CardWithImage.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
-import Button from "@site/src/components/Common/Button";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
 import { Icon } from "@site/src/components/Common/Icon";
 import { IconName } from "@site/src/typescript/iconName";
 import Badge from "@site/src/components/Common/Badge";
@@ -12,7 +12,7 @@ export interface CardWithImageProps {
   imgSrc: string;
   imgAlt?: string;
   url?: string;
-  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  buttonVariant?: ButtonVariant;
   ctaLabel?: string;
   iconName?: IconName;
   imgIcon?: IconName;
@@ -32,7 +32,7 @@ export default function CardWithImage({
   const hasImage = Boolean(imgSrc);
   return (
     <div className="card group flex flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative h-[132.96px] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
+      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative aspect-[79/24] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
         {hasImage ? (
           <img
             src={imgSrc}

src/components/Common/CardWithImageHorizontal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
-import Button from "@site/src/components/Common/Button";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
 import { IconName } from "@site/src/typescript/iconName";
 import Badge from "@site/src/components/Common/Badge";
 import isInternalUrl from "@docusaurus/isInternalUrl";
@@ -11,7 +11,7 @@ export interface CardWithImageHorizontalProps {
   imgSrc: string;
   imgAlt?: string;
   url?: string;
-  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  buttonVariant?: ButtonVariant;
   ctaLabel?: string;
   iconName?: IconName;
 }
@@ -27,8 +27,8 @@ export default function CardWithImageHorizontal({
   iconName,
 }: CardWithImageHorizontalProps) {
   return (
-    <div className="card group flex !flex-row 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="basis-1/3 flex-shrink-0 overflow-hidden rounded-xl relative flex items-center">
+    <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}
@@ -40,17 +40,17 @@ export default function CardWithImageHorizontal({
           </Badge>
         )}
       </div>
-      <div className="flex flex-col flex-1 min-w-0 justify-center items-start gap-1">
+      <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} size="sm" url={url} className="self-start">
+          <Button variant={buttonVariant} url={url}>
             {ctaLabel}
           </Button>
         )}
       </div>
     </div>
   );
-}
+}

src/components/OneColGrid.tsx

@@ -26,7 +26,6 @@ export default function OneColGrid({
       className={clsx(
         "grid grid-cols-1",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}

src/components/ThreeColGrid.tsx

@@ -26,7 +26,6 @@ export default function ThreeColGrid({
       className={clsx(
         "grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))]",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}

src/components/TwoColGrid.tsx

@@ -26,7 +26,6 @@ export default function TwoColGrid({
       className={clsx(
         "grid grid-cols-1 sm:grid-cols-2",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}

templates/introduction.mdx

@@ -1,3 +1,9 @@
+---
+title: "AI Overview"
+hide_table_of_contents: true
+sidebar_label: AI Overview
+---
+
 import CardWithImage from '@site/src/components/Common/CardWithImage';
 import CardWithImageHorizontal from '@site/src/components/Common/CardWithImageHorizontal';
 import TwoColGrid from '@site/src/components/TwoColGrid';
@@ -23,7 +29,7 @@ RavenDB AI Integration can help to ship any AI-related scenarios, including:
 * **Workflow automation** - Trigger safe actions from AI insights (drafts, exports, updates)
 * **Knowledge management (RAG)** - Ask questions over policies, wikis, and PDFs; store answers + citations
 * **Personalization & recommendations** - Behavioral + semantic relevance for feeds, items, and knowledge
-* & many more..
+* & many more...
 
 Inspire yourself with our articles & learn more: