md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add motion animations to Button and CabinetMaintenance components; update form validation and styling

Browse Source
This commit is contained in:
Md Asif
2024-12-22 01:38:09 +05:30
parent 442b8e52dd
commit bfe22a61a5
8 changed files with 291 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/FormBox.jsx
View File

@@ -1,10 +1,23 @@
import { PropTypes } from 'prop-types';
import clsx from 'clsx';
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')}>
<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"
)}
>
{title}
</label>
{children}
@@ -18,4 +31,4 @@ FormBox.propTypes = {
alt: PropTypes.bool,
};
export default FormBox;
export default FormBox;