28 lines
No EOL
872 B
TypeScript
28 lines
No EOL
872 B
TypeScript
import React, {type ReactNode} from "react";
|
|
import clsx from "clsx";
|
|
|
|
type HorizontalInputGroupLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
/** Content to render inside the group */
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* A layout for horizontally aligning inputs and buttons - designed for pages with several input items in a row
|
|
* @param children Children of the layout, i.e., inputs
|
|
* @param className Optional additional styles
|
|
* @param props all other props by html div that might be needed
|
|
* @constructor
|
|
*/
|
|
export default function HorizontalInputGroupLayout({children, className, ...props}: HorizontalInputGroupLayoutProps) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={clsx(
|
|
"flex gap-2 mb-2 items-center",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |