Init

1 files changed, 52 insertions, 0 deletions

diff --git a/src/ui/layouts/CardList.tsx b/src/ui/layouts/CardList.tsx
new file mode 100644
index 0000000..96ae642
--- /dev/null
+++ b/src/ui/layouts/CardList.tsx
@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+        "layout"?:
+                | "merge"
+                | "grid"
+                | "grid-sm"
+                | "grid-xs"
+                | "flex"
+                | "flex-sm"
+                | "flex-xs"
+                | "masonry"
+                | "masonry-h"
+                | "masonry-h-sm";
+        "quiet"?: boolean;
+        "border"?: boolean;
+        "interactive"?: boolean;
+        "no-shadow"?: boolean;
+        "no-flush"?: boolean;
+        "keyboard-nav"?: boolean;
+};
+
+export const CardList = ({
+        layout,
+        quiet,
+        border,
+        interactive,
+        "no-shadow": noShadow,
+        "no-flush": noFlush,
+        "keyboard-nav": keyboardNav,
+        class: cls,
+        ...props
+}: Props) => (
+        <div
+                class:list={[
+                        "l-card-list",
+                        {
+                                [`l-card-list--${layout}`]: layout,
+                                "l-card-list--interactive": interactive,
+                                "l-card-list--no-flush": noFlush,
+                                "l-card-list--quiet": quiet,
+                                "l-card-list--borderless": !border,
+                                "l-card-list--shadow": layout === "merge" && !noShadow,
+                                "js-keyboard-nav": keyboardNav,
+                        },
+                        cls,
+                ]}
+                data-keyboard-nav-item=".l-card-list__card"
+                data-keyboard-nav-mode="grid"
+                {...props}
+        />
+);