initial docs

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;