35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import { PropTypes } from "prop-types";
|
|
import clsx from "clsx";
|
|
|
|
function FormBox({ title, children, alt = false }) {
|
|
return (
|
|
<form
|
|
className={clsx(
|
|
alt
|
|
? "bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark"
|
|
: "bg-surface-variant dark:bg-surface-variant-dark",
|
|
"transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full"
|
|
)}
|
|
>
|
|
<label
|
|
className={clsx(
|
|
alt &&
|
|
"bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark",
|
|
"font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full z-20"
|
|
)}
|
|
>
|
|
{title}
|
|
</label>
|
|
{children}
|
|
</form>
|
|
);
|
|
}
|
|
|
|
FormBox.propTypes = {
|
|
children: PropTypes.node.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
alt: PropTypes.bool,
|
|
};
|
|
|
|
export default FormBox;
|