mirror of
https://github.com/bulwarkmail/native.git
synced 2026-11-02 00:06:23 +00:00
Linus Rath
cf3f919fa2
- Integrated useColors hook for dynamic theming in SettingsScreen. - Updated tab labels and titles to use localized strings. - Refactored styles to utilize theme palette for consistent styling. - Improved locale subscription to re-render labels on language change. feat: implement useSheetDrag hook for bottom sheet gesture handling - Added useSheetDrag hook to manage drag-to-dismiss functionality for bottom sheets. - Configured pan responder for handling drag gestures and dismissing the sheet based on distance and velocity. refactor: restructure color and token management - Introduced useColors and useResolvedTheme hooks for better theme management. - Separated light and dark color palettes for improved maintainability. - Updated tokens to reflect new theming structure and ensure consistency across components.
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import { FileText, Download, Upload } from 'lucide-react-native';
|
|
import { SettingsSection } from './settings-section';
|
|
import Button from '../Button';
|
|
import { spacing, typography, type ThemePalette } from '../../theme/tokens';
|
|
import { useColors } from '../../theme/colors';
|
|
|
|
export function TemplateSettings() {
|
|
const c = useColors();
|
|
const styles = React.useMemo(() => makeStyles(c), [c]);
|
|
const [templates] = useState<{ id: string; name: string }[]>([]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<SettingsSection title="Templates" description="Reusable email templates for common responses.">
|
|
<View style={styles.row}>
|
|
<View style={styles.countRow}>
|
|
<FileText size={16} color={c.mutedForeground} />
|
|
<Text style={styles.count}>
|
|
{templates.length === 1 ? '1 template' : `${templates.length} templates`}
|
|
</Text>
|
|
</View>
|
|
<Button variant="outline" size="sm">Manage</Button>
|
|
</View>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection title="Export / Import" description="Back up or restore your templates.">
|
|
<View style={styles.actions}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={templates.length === 0}
|
|
icon={<Download size={14} color={c.text} />}
|
|
>
|
|
Export
|
|
</Button>
|
|
<Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
|
|
Import
|
|
</Button>
|
|
</View>
|
|
</SettingsSection>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function makeStyles(c: ThemePalette) {
|
|
return StyleSheet.create({
|
|
container: { gap: spacing.xxxl },
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: spacing.md,
|
|
},
|
|
countRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
|
|
count: { ...typography.body, color: c.mutedForeground },
|
|
actions: { flexDirection: 'row', gap: spacing.md, paddingVertical: spacing.md },
|
|
});
|
|
}
|