Initialize Expo app structure

2026-07-01 09:49:39 +02:00
parent ea0671a21d
commit 20002cb1b9
11 changed files with 14455 additions and 0 deletions
@@ -0,0 +1 @@
+
@@ -0,0 +1,34 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export default function PrimaryButton({ label, onPress }) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        pressed ? styles.buttonPressed : null
+      ]}
+    >
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#256f5b',
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingVertical: 14
+  },
+  buttonPressed: {
+    opacity: 0.82
+  },
+  label: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700'
+  }
+});
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import PrimaryButton from '../components/PrimaryButton';
+
+export default function HomeScreen() {
+  const [status, setStatus] = useState('Bereit fuer deine erste Einkaufsliste.');
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.header}>
+        <Text style={styles.eyebrow}>Smart Shopping Companion</Text>
+        <Text style={styles.title}>Shoppy</Text>
+        <Text style={styles.subtitle}>
+          Plane Einkaeufe schneller, behalte Listen im Blick und spare Zeit im Laden.
+        </Text>
+      </View>
+
+      <View style={styles.panel}>
+        <Text style={styles.panelTitle}>Startseite</Text>
+        <Text style={styles.status}>{status}</Text>
+        <PrimaryButton
+          label="Liste vorbereiten"
+          onPress={() => setStatus('Demo-Status: Deine Einkaufsliste wird vorbereitet.')}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24
+  },
+  header: {
+    marginBottom: 28
+  },
+  eyebrow: {
+    color: '#256f5b',
+    fontSize: 14,
+    fontWeight: '700',
+    marginBottom: 8,
+    textTransform: 'uppercase'
+  },
+  title: {
+    color: '#18201d',
+    fontSize: 42,
+    fontWeight: '800',
+    marginBottom: 10
+  },
+  subtitle: {
+    color: '#4f5f59',
+    fontSize: 17,
+    lineHeight: 24
+  },
+  panel: {
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    gap: 16,
+    padding: 20,
+    shadowColor: '#000000',
+    shadowOffset: {
+      height: 4,
+      width: 0
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 12
+  },
+  panelTitle: {
+    color: '#18201d',
+    fontSize: 20,
+    fontWeight: '700'
+  },
+  status: {
+    color: '#4f5f59',
+    fontSize: 16,
+    lineHeight: 22
+  }
+});