92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
||
import { useRouter } from 'expo-router';
|
||
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||
|
||
import { Screen } from '@/components/screen';
|
||
import { useSession } from '@/lib/session';
|
||
import { colors, radius, space, text } from '@/theme/tokens';
|
||
|
||
/**
|
||
* Wird in E6 zum Popover über der Tab-Leiste. Bis dahin dieselbe Auswahl als
|
||
* Screen – die drei Abläufe sind unterschiedlich lang, keiner darf der
|
||
* Standard werden (app-aufbau.md §3).
|
||
*/
|
||
export default function ErstellenScreen() {
|
||
const router = useRouter();
|
||
const { aktiverOrdner } = useSession();
|
||
|
||
return (
|
||
<Screen title="Erstellen">
|
||
{aktiverOrdner ? (
|
||
<Text style={s.scope}>
|
||
Aktiver Ordner: <Text style={s.scopeName}>{aktiverOrdner.name}</Text>
|
||
</Text>
|
||
) : (
|
||
<Text style={s.scope}>Noch kein Ordner gewählt – im Profil einen anlegen.</Text>
|
||
)}
|
||
|
||
<Eintrag
|
||
icon="images-outline"
|
||
titel="Post"
|
||
text="Kulisse, Produkt und Person wählen, Bilderkette erzeugen."
|
||
aufDruck={() => router.push('/erstellen/post')}
|
||
/>
|
||
<Eintrag icon="film-outline" titel="Video" text="Kommt mit E10." gesperrt />
|
||
<Eintrag
|
||
icon="cube-outline"
|
||
titel="Modell"
|
||
text="Person, Produkt oder Kulisse anlegen."
|
||
aufDruck={() => router.push('/modell/neu')}
|
||
/>
|
||
<Eintrag icon="document-outline" titel="Entwürfe" text="Kommt mit E6." gesperrt />
|
||
</Screen>
|
||
);
|
||
}
|
||
|
||
function Eintrag({
|
||
icon, titel, text: beschreibung, aufDruck, gesperrt,
|
||
}: {
|
||
icon: keyof typeof Ionicons.glyphMap;
|
||
titel: string;
|
||
text: string;
|
||
aufDruck?: () => void;
|
||
gesperrt?: boolean;
|
||
}) {
|
||
return (
|
||
<Pressable
|
||
onPress={aufDruck}
|
||
disabled={gesperrt}
|
||
accessibilityRole="button"
|
||
style={({ pressed }) => [s.zeile, gesperrt ? s.aus : null, pressed && !gesperrt ? s.gedrueckt : null]}>
|
||
<View style={s.icon}>
|
||
<Ionicons name={icon} size={20} color={gesperrt ? colors.faint : colors.accent} />
|
||
</View>
|
||
<View style={s.zeileText}>
|
||
<Text style={s.zeileTitel}>{titel}</Text>
|
||
<Text style={s.zeileUnter}>{beschreibung}</Text>
|
||
</View>
|
||
{!gesperrt ? <Ionicons name="chevron-forward" size={18} color={colors.faint} /> : null}
|
||
</Pressable>
|
||
);
|
||
}
|
||
|
||
const s = StyleSheet.create({
|
||
scope: { ...text.label, color: colors.mut },
|
||
scopeName: { color: colors.txt, fontWeight: '700' },
|
||
zeile: {
|
||
flexDirection: 'row', alignItems: 'center', gap: space.lg,
|
||
backgroundColor: colors.surface,
|
||
borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
|
||
borderRadius: radius.md, padding: space.lg,
|
||
},
|
||
aus: { opacity: 0.45 },
|
||
gedrueckt: { opacity: 0.8 },
|
||
icon: {
|
||
width: 38, height: 38, borderRadius: radius.sm,
|
||
backgroundColor: colors.surface2, alignItems: 'center', justifyContent: 'center',
|
||
},
|
||
zeileText: { flex: 1, gap: 2 },
|
||
zeileTitel: { ...text.body, fontWeight: '600', color: colors.txt },
|
||
zeileUnter: { ...text.label, color: colors.mut, lineHeight: 18 },
|
||
});
|