1 files changed, 33 insertions, 0 deletions

diff --git a/src/ui/layouts/Container.tsx b/src/ui/layouts/Container.tsx
new file mode 100644
index 0000000..7ce7ed5
--- /dev/null
+++ b/src/ui/layouts/Container.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as": Tag;
+        "pad-inline"?: boolean;
+        "pad-block"?: boolean;
+        "size"?: "sm";
+        "fixed"?: boolean | "150" | "200";
+}>;
+
+export const Container = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        class: cls,
+        "pad-inline": padInline,
+        "pad-block": padBlock,
+        fixed,
+        size,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-container",
+                        {
+                                "l-container--pad-i": padInline,
+                                "l-container--pad-b": padBlock,
+                                [`l-container--${size}`]: size,
+                                [`l-container--fixed${typeof fixed === "boolean" ? "" : `-${fixed}`}`]: fixed,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);