matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: reduce nested elements

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-19 19:36:45 +02:00
parent 8bad3d215f
commit f062331f54
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pl-fe/src/components/ui/card.tsx
View File

@ -17,7 +17,7 @@ const messages = defineMessages({
type CardSizes = keyof typeof sizes
interface ICard {
interface ICard extends Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'> {
/** The type of card. */
variant?: 'default' | 'rounded' | 'slim';
/** Card size preset. */

40
packages/pl-fe/src/components/ui/column.tsx
View File

@ -80,7 +80,7 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
}, []);
return (
<div role='region' className='relative' aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
<Card role='region' aria-label={label} column-type={transparent ? 'transparent' : 'filled'} size={size} variant={transparent ? undefined : 'rounded'} className={clsx('relative', className)}>
<Helmet>
<title>{label}</title>
@ -93,27 +93,25 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
)}
</Helmet>
<Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
{withHeader && (
<ColumnHeader
label={label}
backHref={backHref}
className={clsx({
'rounded-t-3xl': !isScrolled && !transparent,
'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur': !transparent,
'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
'-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
'-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
})}
action={action}
/>
)}
{withHeader && (
<ColumnHeader
label={label}
backHref={backHref}
className={clsx({
'rounded-t-3xl': !isScrolled && !transparent,
'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur': !transparent,
'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
'-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
'-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
})}
action={action}
/>
)}
<CardBody className={bodyClassName}>
{children}
</CardBody>
</Card>
</div>
<CardBody className={bodyClassName}>
{children}
</CardBody>
</Card>
);
};