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

refactor(FE): Replace Button with static icon tiles in skeletons

Browse Source
This commit is contained in:
rstubryan
2026-01-29 17:07:56 +07:00
parent a3670271de
commit a51a020dfa
3 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+21 -16
View File
@@ -1,4 +1,3 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
const LeftLegend = () => {
@@ -65,26 +64,32 @@ const ChartArea = () => {
const EmptyState = () => {
return (
<>
<div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
<div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-2.5'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white p-3 cursor-default'>
<Icon
fontSize={26}
icon={'heroicons:funnel'}
className='text-white'
/>
</Button>
<div className='absolute inset-0 flex items-center justify-center z-10'>
<div className='flex flex-col items-center justify-center'>
{/* Filter icon */}
<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-[0.875rem] 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'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</span>
<span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
</h3>
<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.
</span>
</p>
</div>
</>
</div>
);
};
src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+19 -14
View File
@@ -1,4 +1,3 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
import React from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
@@ -55,23 +54,29 @@ const UniformityGaugeChartSkeleton: React.FC<
</Pie>
</PieChart>
</ResponsiveContainer>
<div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
<div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mt-5 mb-2.5'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white p-3 cursor-default'>
<Icon
fontSize={26}
icon={'heroicons:funnel'}
className='text-white'
/>
</Button>
<div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
{/* Filter icon */}
<div className='mb-2 mt-5'>
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] 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'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</span>
<span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
</h3>
<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.
</span>
</p>
</div>
</div>
</div>
src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+19 -14
View File
@@ -1,25 +1,30 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
const UniformityTableSkeleton = () => {
return (
<div className='flex flex-col items-center justify-center gap-2 my-20'>
<div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-9'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white p-3 cursor-default'>
<Icon
fontSize={26}
icon={'heroicons:document-text'}
className='text-white'
/>
</Button>
<div className='flex flex-col items-center justify-center my-20'>
{/* Document icon */}
<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-[0.875rem] 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:document-text'
className='text-white'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Data Available
</span>
<span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
</h3>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
There is no uniformity data displayed. Enter uniformity check data to
get started.
</span>
</p>
</div>
);
};