Add desktop (Electron) and mobile (Expo) showcase apps
New workspace packages for demonstrating design system components: - Desktop: Electron + Vite app with brand/theme switching - Mobile: Expo React Native app with brand switching Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
45
packages/showcase/mobile/App.tsx
Normal file
45
packages/showcase/mobile/App.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { ActivityIndicator, View } from 'react-native';
|
||||
import { useFonts } from 'expo-font';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { DTThemeProvider } from '@dangerousthings/react-native';
|
||||
import { BrandProvider, useBrand } from './src/brand/BrandContext';
|
||||
import { RootNavigator } from './src/navigation/RootNavigator';
|
||||
import { useNavigationTheme } from './src/navigation/navigationTheme';
|
||||
|
||||
function AppContent() {
|
||||
const { theme } = useBrand();
|
||||
const navigationTheme = useNavigationTheme();
|
||||
|
||||
return (
|
||||
<DTThemeProvider theme={theme}>
|
||||
<NavigationContainer theme={navigationTheme}>
|
||||
<RootNavigator />
|
||||
</NavigationContainer>
|
||||
</DTThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [fontsLoaded] = useFonts({
|
||||
Tektur: require('./assets/fonts/Tektur-VariableFont_wdth,wght.ttf'),
|
||||
'Tektur-Regular': require('./assets/fonts/Tektur-Regular.ttf'),
|
||||
'Tektur-Medium': require('./assets/fonts/Tektur-Medium.ttf'),
|
||||
'Tektur-SemiBold': require('./assets/fonts/Tektur-SemiBold.ttf'),
|
||||
'Tektur-Bold': require('./assets/fonts/Tektur-Bold.ttf'),
|
||||
});
|
||||
|
||||
if (!fontsLoaded) {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<ActivityIndicator size="large" color="#00FFFF" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BrandProvider initialBrand="dt">
|
||||
<AppContent />
|
||||
</BrandProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user