195 lines
4.6 KiB
TypeScript
195 lines
4.6 KiB
TypeScript
import { StyleSheet, Dimensions, Platform } from 'react-native';
|
|
import { typography } from '@theme';
|
|
|
|
const { width } = Dimensions.get('window');
|
|
const CARD_WIDTH = (width - 48) / 2; // 2-col grid with 16px side padding + 16px gap
|
|
|
|
export const getStyles = (colors: any) =>
|
|
StyleSheet.create({
|
|
// ---------- Root ----------
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
|
|
// ---------- Header ----------
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingTop: 14,
|
|
paddingBottom: 12,
|
|
backgroundColor: colors.background,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border ?? '#ECECEC',
|
|
},
|
|
backBtn: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.surface ?? '#F5F6F8',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 12,
|
|
},
|
|
backBtnText: {
|
|
fontSize: 18,
|
|
color: colors.text,
|
|
},
|
|
headerTitle: {
|
|
fontSize: typography.fontSize.lg,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
flex: 1,
|
|
},
|
|
headerCount: {
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.textSecondary,
|
|
},
|
|
|
|
// ---------- Search Bar wrapper ----------
|
|
searchWrap: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
},
|
|
|
|
// ---------- Category chips ----------
|
|
chipsContainer: {
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border ?? '#ECECEC',
|
|
},
|
|
chipsList: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
},
|
|
chip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
marginRight: 10,
|
|
borderWidth: 1.5,
|
|
},
|
|
chipActive: {
|
|
backgroundColor: colors.primaryMuted ?? '#E9F7EF',
|
|
borderColor: colors.primary ?? '#05824C',
|
|
},
|
|
chipInactive: {
|
|
backgroundColor: colors.surface ?? '#F5F6F8',
|
|
borderColor: 'transparent',
|
|
},
|
|
chipEmoji: {
|
|
fontSize: 14,
|
|
marginRight: 5,
|
|
},
|
|
chipLabel: {
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.medium,
|
|
},
|
|
chipLabelActive: {
|
|
color: colors.primary ?? '#05824C',
|
|
fontWeight: typography.fontWeight.bold,
|
|
},
|
|
chipLabelInactive: {
|
|
color: colors.textSecondary,
|
|
},
|
|
|
|
// ---------- Section header ----------
|
|
sectionHeader: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
paddingBottom: 8,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: typography.fontSize.md,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
},
|
|
sectionSubtitle: {
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
marginTop: 2,
|
|
},
|
|
|
|
// ---------- Product grid ----------
|
|
gridContent: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 8,
|
|
paddingBottom: 32,
|
|
},
|
|
row: {
|
|
justifyContent: 'space-between',
|
|
},
|
|
|
|
// ---------- Skeleton cards ----------
|
|
skeletonCard: {
|
|
width: CARD_WIDTH,
|
|
height: CARD_WIDTH + 80,
|
|
backgroundColor: colors.surface ?? '#F0F0F0',
|
|
borderRadius: 12,
|
|
marginBottom: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
skeletonImageBlock: {
|
|
width: '100%',
|
|
height: CARD_WIDTH,
|
|
backgroundColor: colors.border ?? '#E8E8E8',
|
|
},
|
|
skeletonTextBlock: {
|
|
marginTop: 8,
|
|
marginHorizontal: 10,
|
|
height: 12,
|
|
borderRadius: 6,
|
|
backgroundColor: colors.border ?? '#E8E8E8',
|
|
},
|
|
skeletonTextBlockShort: {
|
|
marginTop: 6,
|
|
marginHorizontal: 10,
|
|
width: '55%',
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: colors.border ?? '#E8E8E8',
|
|
},
|
|
|
|
// ---------- Empty state ----------
|
|
empty: {
|
|
alignItems: 'center',
|
|
paddingTop: 80,
|
|
paddingHorizontal: 40,
|
|
},
|
|
emptyIcon: {
|
|
fontSize: 52,
|
|
marginBottom: 14,
|
|
},
|
|
emptyTitle: {
|
|
fontSize: typography.fontSize.lg,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
textAlign: 'center',
|
|
marginBottom: 6,
|
|
},
|
|
emptyText: {
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
},
|
|
|
|
// ---------- Error state ----------
|
|
errorWrap: {
|
|
alignItems: 'center',
|
|
paddingTop: 80,
|
|
paddingHorizontal: 40,
|
|
},
|
|
errorIcon: {
|
|
fontSize: 40,
|
|
marginBottom: 12,
|
|
},
|
|
errorText: {
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.error ?? '#E53935',
|
|
textAlign: 'center',
|
|
},
|
|
});
|