114 lines
2.6 KiB
TypeScript
114 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import SheetModal from '@/components/ui/SheetModal';
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export default function WidgetModal({ visible, onClose }: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<SheetModal visible={visible} title={t('widget.howToTitle')} onClose={onClose}>
|
|
<View style={styles.content}>
|
|
<View style={styles.row}>
|
|
<PreviewCard label={t('widget.lockScreen')}>
|
|
<View style={[styles.previewInner, styles.previewLock]}>
|
|
<Text style={styles.previewDate} numberOfLines={1}>
|
|
{t('widget.previewDate')}
|
|
</Text>
|
|
<Text style={styles.previewTime} numberOfLines={1}>
|
|
13:45
|
|
</Text>
|
|
</View>
|
|
</PreviewCard>
|
|
|
|
<PreviewCard label={t('widget.homeScreen')}>
|
|
<View style={[styles.previewInner, styles.previewHome]}>
|
|
<Text style={styles.previewQuote} numberOfLines={3}>
|
|
{t('widget.previewQuote')}
|
|
</Text>
|
|
</View>
|
|
</PreviewCard>
|
|
</View>
|
|
|
|
<Text style={styles.desc}>{t('settings.widgetDesc')}</Text>
|
|
</View>
|
|
</SheetModal>
|
|
);
|
|
}
|
|
|
|
function PreviewCard({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<View style={styles.card}>
|
|
{children}
|
|
<Text style={styles.cardLabel}>{label}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
paddingBottom: 18,
|
|
gap: 14,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
},
|
|
card: {
|
|
flex: 1,
|
|
borderRadius: 16,
|
|
overflow: 'hidden',
|
|
backgroundColor: 'rgba(255,255,255,0.75)',
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: 'rgba(94,42,40,0.12)',
|
|
},
|
|
previewInner: {
|
|
height: 120,
|
|
padding: 12,
|
|
justifyContent: 'center',
|
|
},
|
|
previewLock: {
|
|
backgroundColor: 'rgba(244,214,194,0.65)',
|
|
},
|
|
previewHome: {
|
|
backgroundColor: 'rgba(243,208,225,0.55)',
|
|
},
|
|
previewDate: {
|
|
color: 'rgba(94,42,40,0.70)',
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
marginBottom: 6,
|
|
},
|
|
previewTime: {
|
|
color: '#ffffff',
|
|
fontSize: 44,
|
|
fontWeight: '800',
|
|
letterSpacing: 1,
|
|
},
|
|
previewQuote: {
|
|
color: '#5E2A28',
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
fontWeight: '700',
|
|
},
|
|
cardLabel: {
|
|
paddingVertical: 10,
|
|
textAlign: 'center',
|
|
color: '#5E2A28',
|
|
fontSize: 13,
|
|
fontWeight: '700',
|
|
},
|
|
desc: {
|
|
color: 'rgba(94,42,40,0.75)',
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
},
|
|
});
|
|
|