gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +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/skeleton/DashboardLineChartSkeleton.tsx
+23 -26
View File
@@ -3,15 +3,15 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
return (
<div className='w-full bg-white rounded-[12px] border border-[#18181B]/10 p-[16px] relative'>
<div className='w-full bg-white rounded-xl border border-base-content/10 p-4 relative'>
{/* Header with title skeleton */}
<div className='text-[16px] font-semibold'>
<div className='text-base font-semibold'>
Performance{' '}
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
className='inline text-[#18181B]/50'
className='inline text-base-content/50'
/>
</div>
@@ -24,9 +24,9 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
{!meta?.filters && (
<>
{/* Filter icon */}
<div className='mb-[9px]'>
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<div className='mb-2'>
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<Icon
icon='heroicons:funnel'
className='text-white'
@@ -38,10 +38,10 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
</div>
{/* Empty state text */}
<h3 className='text-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</h3>
<p className='text-[#18181B]/50 text-[12px] text-center max-w-xs'>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
Please choose filters to narrow down your results and make
your search easier.
</p>
@@ -50,8 +50,8 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
{meta?.filters && (
<>
{/* Filter icon */}
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
<div className='w-[38px] h-[38px] bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<Icon
icon='heroicons:chart-bar'
className='text-white'
@@ -62,44 +62,41 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
</div>
{/* Empty state text */}
<h3 className='text-gray-900 font-semibold text-base mb-2'>
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
Data Not Yet Available
</h3>
<p className='text-gray-500 text-sm text-center max-w-xs'>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
Please change your filters to get the data.
</p>
</>
)}
</div>
<div className='flex flex-row w-full items-center gap-[16px]'>
<div className='flex-1 h-full min-w-[16px]'>
<div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></div>
<div className='flex flex-row w-full items-center gap-4'>
<div className='flex-1 h-full min-w-4'>
<div className='h-28.5 w-4 bg-base-content/4 rounded'></div>
</div>
<div className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
<div className='w-full grid grid-cols-1 gap-y-13.25 mb-2'>
{[1, 2, 3, 4].map((item) => (
<div
key={item}
className='flex items-center w-full h-[16px] gap-[16px]'
>
<div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
<div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
<div key={item} className='flex items-center w-full h-4 gap-4'>
<div className='h-4 w-6 bg-base-content/4 rounded'></div>
<div className='h-0.25 w-full bg-base-content/4 rounded'></div>
</div>
))}
</div>
</div>
{/* X-axis skeleton (bottom) */}
<div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
<div className='grid grid-cols-10 gap-15 mt-4 ps-13 sm:ps-26 overflow-x-hidden'>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
<div
key={item}
className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
className='h-4 w-9.5 bg-base-content/4 rounded'
></div>
))}
</div>
<div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
<div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></div>
<div className='flex justify-center pt-4 ps-13 sm:ps-26'>
<div className='h-4 w-28.5 bg-base-content/4 rounded'></div>
</div>
</div>
</div>