gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 07:15:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(FE): fixing classname using dynamic value

Browse Source
This commit is contained in:
randy-ar
2026-01-29 14:50:16 +07:00
parent dce913815e
commit 6c2baca807
6 changed files with 350 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/dashboard/export/DashboardExportCharts.tsx
+2 -1
View File
@@ -189,7 +189,8 @@ const DashboardExportCharts = forwardRef<
>
<Card
className={{
wrapper: 'w-full rounded-lg',
wrapper: 'w-full rounded-lg p-0',
body: 'p-4',
}}
variant='bordered'
>
src/components/pages/dashboard/export/DashboardExportStats.tsx
+19 -20
View File
@@ -72,7 +72,7 @@ const DashboardExportStats = forwardRef<
{prefix}
{formatNumber(value)}
{suffix && (
<span className='text-[14px] font-normal text-[#18181B]/50'>
<span className='text-sm font-normal text-base-content/50'>
{suffix}
</span>
)}
@@ -87,7 +87,7 @@ const DashboardExportStats = forwardRef<
}));
return (
<div ref={containerRef} className='grid grid-cols-4 gap-[12px]'>
<div ref={containerRef} className='grid grid-cols-4 gap-3'>
{CARD_CONFIG.map((config) => {
// Find matching data from API
const cardData = data.find((item) => item.label === config.key);
@@ -102,37 +102,37 @@ const DashboardExportStats = forwardRef<
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
footer: '!mt-0',
footer: 'mt-0!',
}}
variant='bordered'
footer={
<div className='flex flex-row justify-between px-[16px] pb-[16px]'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
<div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
<div className='text-base-content/50 font-semibold text-xs'>
From last month
</div>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
<div className='text-base-content/50 font-semibold text-xs'>
Filter Required
</div>
</div>
}
>
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
<div className='flex flex-row items-center gap-3 px-4 pt-4'>
<Alert
variant='soft'
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
>
<Icon
icon={config.icon}
width={24}
height={24}
className='text-[#18181B]/50'
className='text-base-content/50'
/>
</Alert>
<div>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
<h3 className='text-base-content/50 font-semibold text-sm'>
{config.key}
</h3>
<p className='text-[20px] font-semibold text-[#18181B]/50'>
<p className='text-xl font-semibold text-base-content/50'>
********
</p>
</div>
@@ -147,21 +147,20 @@ const DashboardExportStats = forwardRef<
<Card
key={config.key}
className={{
wrapper:
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
wrapper: 'w-full rounded-lg border border-base-content/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
footer: '!mt-0',
footer: 'mt-0!',
}}
variant='bordered'
footer={
<div className='flex flex-row justify-between px-[16px] pb-[16px]'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
<div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
<div className='text-base-content/50 font-semibold text-xs'>
From last month
</div>
<div
className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
>
<Icon icon={trend.icon} width={16} height={16} />
{trend.value}%
@@ -173,15 +172,15 @@ const DashboardExportStats = forwardRef<
<Alert
variant='soft'
color={config.alertColor}
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
>
<Icon icon={config.icon} width={24} height={24} />
</Alert>
<div>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
<h3 className='text-base-content/50 font-semibold text-sm'>
{cardData.label}
</h3>
<p className='text-[20px] font-semibold'>
<p className='text-xl font-semibold'>
{formatValue(cardData.value, config.prefix, config.suffix)}
</p>
</div>