appcakes-bot/appcakes-builds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: 444813b5-5daf-49b2-bf1a-7e4caeab4e17

Browse Source
This commit is contained in:
AppCakes
2026-07-02 14:33:05 +00:00
commit 6ad33e0c93
146 changed files with 26652 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DashboardSkeleton.tsx
+246
View File
@@ -0,0 +1,246 @@
import React from 'react';
import { IonSkeletonText } from '@ionic/react';
const DashboardSkeleton: React.FC = () => {
return (
<div style={{ padding: '0' }}>
{/* Top Greeting Row */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '16px 20px 12px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<IonSkeletonText
animated
style={{ width: '48px', height: '48px', borderRadius: '50%' }}
/>
<div>
<IonSkeletonText
animated
style={{
width: '120px',
height: '18px',
borderRadius: '4px',
marginBottom: '8px',
}}
/>
<IonSkeletonText
animated
style={{ width: '80px', height: '14px', borderRadius: '4px' }}
/>
</div>
</div>
</div>
{/* Loved Ones Carousel */}
<div
style={{
padding: '0 20px 6px',
display: 'flex',
gap: '12px',
overflowX: 'hidden',
}}
>
<div
style={{
backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '16px',
width: '292px',
flexShrink: 0,
display: 'flex',
flexDirection: 'column',
gap: '14px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<IonSkeletonText
animated
style={{ width: '48px', height: '48px', borderRadius: '16px' }}
/>
<div style={{ flex: 1 }}>
<IonSkeletonText
animated
style={{
width: '100px',
height: '16px',
borderRadius: '4px',
marginBottom: '4px',
}}
/>
<IonSkeletonText
animated
style={{ width: '80px', height: '12px', borderRadius: '4px' }}
/>
</div>
</div>
<IonSkeletonText
animated
style={{ width: '100%', height: '48px', borderRadius: '12px' }}
/>
<IonSkeletonText
animated
style={{
width: '100%',
height: '48px',
borderRadius: '999px',
marginTop: 'auto',
}}
/>
</div>
<div
style={{
backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '16px',
width: '292px',
flexShrink: 0,
display: 'flex',
flexDirection: 'column',
gap: '14px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<IonSkeletonText
animated
style={{ width: '48px', height: '48px', borderRadius: '16px' }}
/>
<div style={{ flex: 1 }}>
<IonSkeletonText
animated
style={{
width: '100px',
height: '16px',
borderRadius: '4px',
marginBottom: '4px',
}}
/>
<IonSkeletonText
animated
style={{ width: '80px', height: '12px', borderRadius: '4px' }}
/>
</div>
</div>
<IonSkeletonText
animated
style={{ width: '100%', height: '48px', borderRadius: '12px' }}
/>
<IonSkeletonText
animated
style={{
width: '100%',
height: '48px',
borderRadius: '999px',
marginTop: 'auto',
}}
/>
</div>
</div>
{/* Quick Actions */}
<div style={{ padding: '0 20px', margin: '20px 0' }}>
<IonSkeletonText
animated
style={{
width: '120px',
height: '16px',
borderRadius: '4px',
marginBottom: '16px',
}}
/>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: '12px',
}}
>
{[1, 2, 3, 4].map((i) => (
<div
key={i}
style={{
backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '16px',
display: 'flex',
alignItems: 'center',
gap: '12px',
}}
>
<IonSkeletonText
animated
style={{ width: '44px', height: '44px', borderRadius: '12px' }}
/>
<IonSkeletonText
animated
style={{ width: '60px', height: '14px', borderRadius: '4px' }}
/>
</div>
))}
</div>
</div>
{/* Activity List */}
<div style={{ padding: '0 20px', margin: '20px 0' }}>
<IonSkeletonText
animated
style={{
width: '100px',
height: '16px',
borderRadius: '4px',
marginBottom: '16px',
}}
/>
<div
style={{
backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '8px 0',
}}
>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{
display: 'flex',
alignItems: 'center',
padding: '14px 16px',
gap: '12px',
}}
>
<IonSkeletonText
animated
style={{ width: '40px', height: '40px', borderRadius: '12px' }}
/>
<div style={{ flex: 1 }}>
<IonSkeletonText
animated
style={{
width: '140px',
height: '14px',
borderRadius: '4px',
marginBottom: '6px',
}}
/>
<IonSkeletonText
animated
style={{
width: '100px',
height: '12px',
borderRadius: '4px',
}}
/>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default DashboardSkeleton;