mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 12:09:43 +02:00
61d181fbc2
Move inactive projects out of active workspace: - bauntown (community website) - maerchenzauber (AI story generation) - memoro (voice memo app) - news (news aggregation) - nutriphi (nutrition tracking) - reader (reading app) - uload (URL shortener) - wisekeep (AI wisdom extraction) Update CLAUDE.md documentation: - Add presi to active projects - Document archived projects section - Update workspace configuration Archived apps can be re-activated by moving back to apps/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { useTheme } from '~/features/theme/ThemeProvider';
|
|
import colors from '~/tailwind.config.js';
|
|
|
|
/**
|
|
* Skeleton loader for BlueprintCard component
|
|
* Matches exact BlueprintCard structure and dimensions
|
|
*/
|
|
const BlueprintCardSkeleton = () => {
|
|
const { isDark, themeVariant } = useTheme();
|
|
|
|
// Get theme colors
|
|
const borderColor = isDark
|
|
? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.border || '#424242'
|
|
: (colors as any).theme?.extend?.colors?.[themeVariant]?.border || '#e6e6e6';
|
|
|
|
const backgroundColor = isDark
|
|
? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
|
|
: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
|
|
|
|
const skeletonColor = isDark ? '#3a3a3a' : '#e0e0e0';
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
{
|
|
backgroundColor,
|
|
borderWidth: 1,
|
|
borderColor,
|
|
},
|
|
]}
|
|
>
|
|
<View style={styles.header}>
|
|
{/* Title skeleton */}
|
|
<View style={[styles.titleSkeleton, { backgroundColor: skeletonColor }]} />
|
|
|
|
{/* Pin icon skeleton */}
|
|
<View
|
|
style={[
|
|
styles.iconSkeleton,
|
|
{
|
|
backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
|
|
{/* Description skeleton - two lines */}
|
|
<View>
|
|
<View style={[styles.descriptionLine, { backgroundColor: skeletonColor, width: '100%' }]} />
|
|
<View style={[styles.descriptionLine, { backgroundColor: skeletonColor, width: '75%' }]} />
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
titleSkeleton: {
|
|
height: 20,
|
|
width: 180,
|
|
borderRadius: 4,
|
|
opacity: 0.6,
|
|
},
|
|
iconSkeleton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 8,
|
|
opacity: 0.6,
|
|
},
|
|
descriptionLine: {
|
|
height: 14,
|
|
borderRadius: 3,
|
|
marginBottom: 6,
|
|
opacity: 0.5,
|
|
},
|
|
});
|
|
|
|
export default BlueprintCardSkeleton;
|