diff --git a/src/components/FieldRow.astro b/src/components/FieldRow.astro new file mode 100644 index 0000000..225203f --- /dev/null +++ b/src/components/FieldRow.astro @@ -0,0 +1,61 @@ +--- +import type { HTMLAttributes } from "astro/types"; +import { cn } from "../utils/cn"; + +interface Props extends HTMLAttributes<"fieldset"> { + label?: string; + description?: string; + error?: string; + columns?: 1 | 2 | 3 | 4; + gap?: "sm" | "md" | "lg"; +} + +const { + label, + description, + error, + columns = 2, + gap = "md", + class: className, + ...rest +}: Props = Astro.props; + +const gridCols = + columns === 4 + ? "wr:grid-cols-1 sm:wr:grid-cols-4" + : columns === 3 + ? "wr:grid-cols-1 sm:wr:grid-cols-3" + : columns === 2 + ? "wr:grid-cols-1 sm:wr:grid-cols-2" + : "wr:grid-cols-1"; + +const gaps = gap === "lg" ? "wr:gap-4" : gap === "sm" ? "wr:gap-2" : "wr:gap-3"; +--- + +
diff --git a/src/components/Form.astro b/src/components/Form.astro index b0d6f94..87762c0 100644 --- a/src/components/Form.astro +++ b/src/components/Form.astro @@ -80,7 +80,7 @@ const formId = `f-${Math.random().toString(36).slice(2)}`; } { description && ( -+
{description}
)