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

completed homepage design

Browse Source
This commit is contained in:
Md Asif
2024-09-30 23:43:30 +05:30
parent 8022e3a662
commit 45bc3eff57
8 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/FormBox.jsx
View File

@@ -1,9 +1,10 @@
import { PropTypes } from 'prop-types';
import clsx from 'clsx';
function FormBox({title, children}) {
function FormBox({title, children, alt = false}) {
return (
<div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
<label className='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>
<div 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}
</div>
);
@@ -11,7 +12,8 @@ function FormBox({title, children}) {
FormBox.propTypes = {
children: PropTypes.node.isRequired,
title: PropTypes.string.isRequired
title: PropTypes.string.isRequired,
alt: PropTypes.bool,
};
export default FormBox;