first commit

2026-05-23 09:48:07 +07:00
parent 03b9101bd5
commit b6ccde2c74
134 changed files with 7178 additions and 110 deletions
@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { GridColumnProps } from "./interface";
+import clsx from "clsx";
+
+const GridColumn = ({
+  children,
+  col = 3,
+  sm,
+  tabletCol3,
+  mobile2,
+  scroll20,
+  scrollMobile85,
+  className,
+}: GridColumnProps) => {
+  return (
+    <div
+      className={clsx(
+        "grid w-full",
+
+        /* ===== GAP ===== */
+        sm ? "gap-2" : "gap-4",
+
+        /* ===== DEFAULT COL ===== */
+        {
+          "grid-cols-1": col === 1,
+          "grid-cols-2": col === 2,
+          "grid-cols-3": col === 3,
+          "grid-cols-4": col === 4,
+          "grid-cols-5": col === 5,
+          "grid-cols-6": col === 6,
+          "grid-cols-8": col === 8,
+          "grid-cols-12": col === 12,
+        },
+
+        /* ===== RESPONSIVE ===== */
+        "xl:grid-cols-3", // giống default SCSS fallback
+        "lg:grid-cols-2",
+        "md:grid-cols-2",
+        "sm:grid-cols-1",
+
+        /* ===== CUSTOM RULES ===== */
+        tabletCol3 && "lg:grid-cols-3",
+
+        mobile2 && "sm:grid-cols-2",
+
+        /* ===== COL 4 SPECIAL ===== */
+        col === 4 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"),
+
+        /* ===== COL 5 ===== */
+        col === 5 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"),
+
+        /* ===== SCROLL ===== */
+        scroll20 &&
+          "grid-flow-col auto-cols-[20%] overflow-x-auto snap-x snap-mandatory gap-2",
+
+        scrollMobile85 &&
+          "md:grid-cols-none md:grid-flow-col md:auto-cols-[85%] md:overflow-x-auto md:snap-x md:snap-mandatory",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default GridColumn;
@@ -0,0 +1 @@
+export { default } from "./GridColumn";
@@ -0,0 +1,14 @@
+export interface GridColumnProps {
+  children: React.ReactNode;
+
+  col?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12;
+  sm?: boolean;
+
+  tabletCol3?: boolean;
+  mobile2?: boolean;
+
+  scroll20?: boolean;
+  scrollMobile85?: boolean;
+
+  className?: string;
+}