change version 1.7.0

components/anchor.tsx

@@ -3,7 +3,7 @@
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ComponentProps } from "react";
+import { ComponentProps, forwardRef } from "react";
 
 type AnchorProps = ComponentProps<typeof Link> & {
   absolute?: boolean;
@@ -11,28 +11,28 @@ type AnchorProps = ComponentProps<typeof Link> & {
   disabled?: boolean;
 };
 
-export default function Anchor({
-  absolute,
-  className = "",
-  activeClassName = "",
-  disabled,
-  children,
-  ...props
-}: AnchorProps) {
-  const path = usePathname();
-  let isMatch = absolute
-    ? props.href.toString().split("/")[1] == path.split("/")[1]
-    : path === props.href;
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({ absolute, className = "", activeClassName = "", disabled, children, ...props }, ref) => {
+    const path = usePathname();
+    let isMatch = absolute
+      ? props.href.toString().split("/")[1] == path.split("/")[1]
+      : path === props.href;
 
-  if (props.href.toString().includes("http")) isMatch = false;
+    if (props.href.toString().includes("http")) isMatch = false;
+
+    if (disabled)
+      return (
+        <div className={cn(className, "cursor-not-allowed")}>{children}</div>
+      );
 
-  if (disabled)
     return (
-      <div className={cn(className, "cursor-not-allowed")}>{children}</div>
+      <Link ref={ref} className={cn(className, isMatch && activeClassName)} {...props}>
+        {children}
+      </Link>
     );
-  return (
-    <Link className={cn(className, isMatch && activeClassName)} {...props}>
-      {children}
-    </Link>
-  );
-}
+  }
+);
+// ✅ Tambahkan display name agar tidak error saat build
+Anchor.displayName = "Anchor";
+
+export default Anchor;

components/markdown/card.tsx

@@ -1,57 +1,41 @@
 import React, { ReactNode } from "react";
 import * as Icons from "lucide-react";
+import Link from "next/link";
+import clsx from "clsx";
 
 type IconName = keyof typeof Icons;
 
-// Props untuk Card utama
 interface CardProps {
-  children: ReactNode;
-}
-
-// Props untuk CardTitle
-interface CardTitleProps {
   title: string;
-  icon?: IconName; // Properti ikon berupa nama ikon yang valid
+  icon?: IconName;
+  href?: string;
+  horizontal?: boolean;
+  children: ReactNode;
+  className?: string;
 }
 
-// Props untuk CardDescription
-interface CardDescriptionProps {
-  description: string;
-}
+const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, className }) => {
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
 
-// Komponen Card Utama
-const Card: React.FC<CardProps> & {
-  Title: React.FC<CardTitleProps>;
-  Description: React.FC<CardDescriptionProps>;
-} = ({ children }) => {
-  return (
-    <div className="border rounded-lg shadow-md overflow-hidden py-4 px-8">
-      {children}
+  const content = (
+    <div
+      className={clsx(
+        "border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
+        "hover:bg-gray-50 dark:hover:bg-gray-800",
+        "flex gap-2",
+        horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
+        className
+      )}
+    >
+      {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
+      <div className="flex-1 min-w-0 my-auto h-full">
+        <span className="text-base font-semibold">{title}</span>
+        <div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
+      </div>
     </div>
   );
+
+  return href ? <Link className="no-underline block" href={href}>{content}</Link> : content;
 };
 
-// Komponen Card Title
-Card.Title = ({ title, icon }: CardTitleProps) => {
-  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
-
-  return (
-    <div className="flex flex-col space-y-1">
-      {Icon && <Icon className="text-xl text-primary" />} {/* Render ikon jika ada */}
-      <h2 className="text-xl font-bold">{title}</h2>
-    </div>
-  );
-};
-
-// Menambahkan displayName untuk Card.Title
-Card.Title.displayName = "CardTitle";
-
-// Komponen Card Description
-Card.Description = ({ description }: CardDescriptionProps) => (
-  <p className="text-muted-foreground text-[16.5px] mt-2">{description}</p>
-);
-
-// Menambahkan displayName untuk Card.Description
-Card.Description.displayName = "CardDescription";
-
 export default Card;

components/markdown/cardgroup.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+
+interface CardGroupProps {
+  children: ReactNode;
+  cols?: number;
+  className?: string;
+}
+
+const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className }) => {
+  const cardsArray = React.Children.toArray(children); // Pastikan children berupa array
+
+  return (
+    <div
+      className={clsx(
+        "grid gap-4",
+        `grid-cols-1 sm:grid-cols-${cols}`,
+        className
+      )}
+    >
+      {cardsArray.map((card, index) => (
+        <div key={index}>{card}</div>
+      ))}
+    </div>
+  );
+};
+
+export default CardGroup;

components/markdown/tooltips.tsx

@@ -1,30 +1,27 @@
-'use client';
+"use client";
 import React, { useState } from "react";
 
 interface TooltipProps {
-  tip: string; // Teks yang akan ditampilkan dalam tooltip
-  children: React.ReactNode; // Elemen yang akan memunculkan tooltip
+  text: string;
+  tip: string;
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ tip, children }) => {
+const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div
-      className="relative inline-block"
+    <span
+      className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
-      {children}
+      {text}
       {visible && (
-        <div
-          className="absolute bottom-12 bg-black border-solid-2 border border-white text-white text-sm px-2 py-1 rounded"
-          style={{ whiteSpace: "nowrap" }}
-        >
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-background text-foreground text-sm p-2 rounded shadow-md break-words text-center outline outline-1 outline-offset-2">
           {tip}
-        </div>
+        </span>
       )}
-    </div>
+    </span>
   );
 };
 

components/search.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileTextIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import {
   Dialog,
@@ -11,14 +13,15 @@ import {
   DialogClose,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useEffect, useMemo, useState } from "react";
 import Anchor from "./anchor";
 import { advanceSearch, cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 export default function Search() {
+  const router = useRouter();
   const [searchedInput, setSearchedInput] = useState("");
   const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -40,6 +43,41 @@ export default function Search() {
     [searchedInput]
   );
 
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredResults]);
+
+  useEffect(() => {
+    const handleNavigation = (event: KeyboardEvent) => {
+      if (!isOpen || filteredResults.length === 0) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const selectedItem = filteredResults[selectedIndex];
+        if (selectedItem) {
+          router.push(`/docs${selectedItem.href}`);
+          setIsOpen(false);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleNavigation);
+
+    return () => {
+      window.removeEventListener("keydown", handleNavigation);
+    };
+  }, [isOpen, filteredResults, selectedIndex, router]);
+
   return (
     <div>
       <Dialog
@@ -82,53 +120,54 @@ export default function Search() {
           )}
           <ScrollArea className="max-h-[400px] overflow-y-auto">
             <div className="flex flex-col items-start overflow-y-auto sm:px-2 px-1 pb-4">
-              {filteredResults.map((item) => {
-                const level = (item.href.split("/").slice(1).length -
-                  1) as keyof typeof paddingMap;
+              {filteredResults.map((item, index) => {
+                const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
                 const paddingClass = paddingMap[level];
+                const isActive = index === selectedIndex;
 
                 return (
-                  <DialogClose key={item.href} asChild>
-                    <Anchor
-                      className={cn(
-                        "dark:hover:bg-stone-900 hover:bg-stone-100 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
-                        paddingClass
-                      )}
-                      href={`/docs${item.href}`}
-                    >
-                      <div
+                    <DialogClose key={item.href} asChild>
+                        <Anchor
                         className={cn(
-                          "flex items-center w-fit h-full py-3 gap-1.5 px-2",
-                          level > 1 && "border-l pl-4"
+                            "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                            isActive && "bg-primary/20 dark:bg-primary/30",
+                            paddingClass
                         )}
-                      >
-                        <FileIcon className="h-[1.1rem] w-[1.1rem] mr-1" />{" "}
-                        {item.title}
-                      </div>
-                    </Anchor>
-                  </DialogClose>
+                        href={`/docs${item.href}`}
+                        tabIndex={0}
+                        >
+                        <div
+                            className={cn(
+                            "flex items-center w-fit h-full py-3 gap-1.5 px-2",
+                            level > 1 && "border-l pl-4"
+                            )}
+                        >
+                            <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" /> {item.title}
+                        </div>
+                        </Anchor>
+                    </DialogClose>
                 );
               })}
             </div>
           </ScrollArea>
           <DialogFooter className="md:flex md:justify-start hidden h-14 px-6 bg-transparent border-t text-[14px] outline-none">
-              <div className="flex items-center gap-2">
-                <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-                  <ArrowUpIcon className="w-3 h-3"/>
-                </span>
-                <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-                  <ArrowDownIcon className="w-3 h-3"/>
-                </span>
-                <p className="text-muted-foreground">to navigate</p>
-                <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-                  <CornerDownLeftIcon className="w-3 h-3"/>
-                </span>
-                <p className="text-muted-foreground">to select</p>
-                <span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">
-                  esc
-                </span>
-                <p className="text-muted-foreground">to close</p>
-              </div>
+            <div className="flex items-center gap-2">
+              <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
+                <ArrowUpIcon className="w-3 h-3"/>
+              </span>
+              <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
+                <ArrowDownIcon className="w-3 h-3"/>
+              </span>
+              <p className="text-muted-foreground">to navigate</p>
+              <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
+                <CornerDownLeftIcon className="w-3 h-3"/>
+              </span>
+              <p className="text-muted-foreground">to select</p>
+              <span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">
+                esc
+              </span>
+              <p className="text-muted-foreground">to close</p>
+            </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -140,5 +179,4 @@ const paddingMap = {
   1: "pl-2",
   2: "pl-4",
   3: "pl-10",
-  // Add more levels if needed
 } as const;