Skip to content

Commit ed26955

Browse files
KaganYrkKaganYrk
authored
Merge pull request #263 from TRA-Tech/feature/add-time-icons
feat:add new time icons
2 parents b235b9d + ec1f565 commit ed26955

3 files changed

Lines changed: 684 additions & 90 deletions

File tree

‎example/src/screens/Home.jsx‎

Lines changed: 138 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { FlatList, TouchableOpacity, View } from 'react-native';
1+
import React, { useMemo, useState } from 'react';
2+
import {
3+
SafeAreaView,
4+
FlatList,
5+
TouchableOpacity,
6+
View,
7+
TextInput as RNTextInput,
8+
StyleSheet,
9+
} from 'react-native';
210
import Text from '../components/Text';
311

412
const components = [
@@ -25,18 +33,134 @@ const components = [
2533
'Swipe',
2634
];
2735

28-
const Home = ({ navigation }) => (
29-
<View>
30-
<FlatList
31-
ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: 'gray' }} />}
32-
data={components}
33-
renderItem={({ item }) => (
34-
<TouchableOpacity style={{ height: 50, marginHorizontal: 20, justifyContent: 'center' }} onPress={() => navigation.navigate(item)}>
35-
<Text>{item}</Text>
36-
</TouchableOpacity>
37-
)}
38-
/>
39-
</View>
40-
);
36+
const ComponentCard = ({ name, onPress }) => {
37+
const initials = name
38+
.split(/(?=[A-Z])/)
39+
.map((p) => p[0])
40+
.slice(0, 2)
41+
.join('');
42+
43+
return (
44+
<TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.8}>
45+
<View style={styles.badge}>
46+
<Text style={styles.badgeText}>{initials}</Text>
47+
</View>
48+
<View style={styles.cardBody}>
49+
<Text style={styles.cardTitle}>{name}</Text>
50+
</View>
51+
</TouchableOpacity>
52+
);
53+
};
54+
55+
const Home = ({ navigation }) => {
56+
const [query, setQuery] = useState('');
57+
58+
const filtered = useMemo(() => {
59+
if (!query) return components;
60+
const q = query.trim().toLowerCase();
61+
return components.filter((c) => c.toLowerCase().includes(q));
62+
}, [query]);
63+
64+
return (
65+
<SafeAreaView style={styles.container}>
66+
<View style={styles.header}>
67+
<Text style={styles.title}>Kitra UI</Text>
68+
<Text style={styles.subtitle}>Components playground — pick a component to preview</Text>
69+
</View>
70+
71+
<RNTextInput
72+
value={query}
73+
onChangeText={setQuery}
74+
placeholder="Search components..."
75+
placeholderTextColor="#8b8f98"
76+
style={styles.search}
77+
/>
78+
79+
<FlatList
80+
data={filtered}
81+
keyExtractor={(item) => item}
82+
contentContainerStyle={styles.listContent}
83+
ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
84+
renderItem={({ item }) => (
85+
<ComponentCard name={item} onPress={() => navigation.navigate(item)} />
86+
)}
87+
ListEmptyComponent={() => (
88+
<View style={styles.emptyWrap}>
89+
<Text style={styles.emptyText}>No components match "{query}"</Text>
90+
</View>
91+
)}
92+
/>
93+
</SafeAreaView>
94+
);
95+
};
96+
97+
const styles = StyleSheet.create({
98+
container: {
99+
flex: 1,
100+
backgroundColor: '#f6f7fb',
101+
},
102+
header: {
103+
paddingHorizontal: 16,
104+
paddingTop: 18,
105+
paddingBottom: 8,
106+
},
107+
title: {
108+
fontSize: 28,
109+
fontWeight: '700',
110+
},
111+
subtitle: {
112+
fontSize: 13,
113+
color: '#6b7280',
114+
marginTop: 4,
115+
},
116+
search: {
117+
height: 44,
118+
marginHorizontal: 16,
119+
marginTop: 8,
120+
paddingHorizontal: 12,
121+
borderRadius: 10,
122+
backgroundColor: '#ffffff',
123+
shadowColor: '#000',
124+
shadowOpacity: 0.03,
125+
shadowRadius: 6,
126+
elevation: 1,
127+
},
128+
listContent: {
129+
padding: 12,
130+
},
131+
card: {
132+
flexDirection: 'row',
133+
alignItems: 'center',
134+
padding: 12,
135+
backgroundColor: '#fff',
136+
borderRadius: 10,
137+
},
138+
badge: {
139+
width: 44,
140+
height: 44,
141+
borderRadius: 22,
142+
backgroundColor: '#eef2ff',
143+
alignItems: 'center',
144+
justifyContent: 'center',
145+
},
146+
badgeText: {
147+
color: '#4f46e5',
148+
fontWeight: '700',
149+
},
150+
cardBody: {
151+
marginLeft: 12,
152+
},
153+
cardTitle: {
154+
fontSize: 16,
155+
color: '#111827',
156+
},
157+
emptyWrap: {
158+
padding: 24,
159+
alignItems: 'center',
160+
},
161+
emptyText: {
162+
color: '#6b7280',
163+
},
164+
});
41165

42166
export default Home;

‎example/src/screens/Icon.jsx‎

Lines changed: 3 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -8,84 +8,11 @@
88
import React from 'react';
99
import { View, StyleSheet, Text, ScrollView } from 'react-native';
1010
import { Icon } from '@tra-tech/react-native-kitra';
11+
import iconPaths from '../../../src/components/Icons/iconPaths.json';
1112

1213
const IconScreen = () => {
13-
// Get all available icons dynamically
14-
const allIcons = [
15-
"albums", "align-bottom", "align-bottom-simple", "align-center-horizontal", "align-center-horizontal-simple",
16-
"align-center-vertical", "align-center-vertical-1", "align-center-vertical-simple", "align-left", "align-left-simple",
17-
"align-right", "align-right-simple", "align-top", "align-top-simple", "archive", "archive-box", "archive-tray",
18-
"arrow-arc-left", "arrow-arc-right", "arrow-bend-double-up-left", "arrow-bend-double-up-right", "arrow-bend-down-left",
19-
"arrow-bend-down-right", "arrow-bend-left-down", "arrow-bend-left-up", "arrow-bend-right-down", "arrow-bend-right-up",
20-
"arrow-bend-up-left", "arrow-bend-up-right", "arrow-circle-down", "arrow-circle-down-left", "arrow-circle-down-right",
21-
"arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-up-left", "arrow-circle-up-right",
22-
"arrow-clockwise", "arrow-counter-clockwise", "arrow-down", "arrow-down-left", "arrow-down-right", "arrow-elbow-down-left",
23-
"arrow-elbow-down-right", "arrow-elbow-left", "arrow-elbow-left-down", "arrow-elbow-left-up", "arrow-elbow-right",
24-
"arrow-elbow-right-down", "arrow-elbow-right-up", "arrow-elbow-up-left", "arrow-elbow-up-right", "arrow-fat-down",
25-
"arrow-fat-left", "arrow-fat-line-down", "arrow-fat-line-left", "arrow-fat-line-right", "arrow-fat-line-up",
26-
"arrow-fat-lines-down", "arrow-fat-lines-left", "arrow-fat-lines-right", "arrow-fat-lines-up", "arrow-fat-right",
27-
"arrow-fat-up", "arrow-left", "arrow-line-down", "arrow-line-down-left", "arrow-line-down-right", "arrow-line-left",
28-
"arrow-line-right", "arrow-line-up", "arrow-line-up-left", "arrow-line-up-right", "arrow-right", "arrow-square-down",
29-
"arrow-square-down-left", "arrow-square-down-right", "arrow-square-in", "arrow-square-left", "arrow-square-out",
30-
"arrow-square-right", "arrow-square-up", "arrow-square-up-left", "arrow-square-up-right", "arrow-u-down-left",
31-
"arrow-u-down-right", "arrow-u-left-down", "arrow-u-left-up", "arrow-u-right-down", "arrow-u-right-up",
32-
"arrow-u-up-left", "arrow-u-up-right", "arrow-up", "arrow-up-left", "arrow-up-right", "arrows-clockwise",
33-
"arrows-counter-clockwise", "arrows-down-up", "arrows-horizontal", "arrows-in", "arrows-in-cardinal",
34-
"arrows-in-line-horizontal", "arrows-in-line-vertical", "arrows-in-simple", "arrows-left-right", "arrows-out",
35-
"arrows-out-cardinal", "arrows-out-line-horizontal", "arrows-out-line-vertical", "arrows-out-simple",
36-
"arrows-vertical", "backspace", "bag", "bag-simple", "balloon", "bank", "barcode", "battery-warning-vertical",
37-
"bell", "bell-ringing", "bell-simple", "bell-simple-ringing", "bell-simple-slash", "bell-slash", "bezier-curve",
38-
"book", "book-bookmark", "book-open", "bookmark", "bookmark-simple", "bookmarks", "bookmarks-simple", "books",
39-
"bounding-box", "briefcase", "briefcase-metal", "buildings", "cardholder", "cards", "caret-circle-double-down",
40-
"caret-circle-double-left", "caret-circle-double-right", "caret-circle-double-up", "caret-circle-down",
41-
"caret-circle-left", "caret-circle-right", "caret-circle-up", "caret-double-down", "caret-double-left",
42-
"caret-double-right", "caret-double-up", "chalkboard", "chalkboard-simple", "chalkboard-teacher", "chart-bar",
43-
"chart-bar-horizontal", "chart-line", "chart-pie", "chart-pie-slice", "chartlineup", "check", "check-circle",
44-
"check-square", "check-square-offset", "checks", "circle", "circle-dashed", "circle-half", "circle-half-tilt",
45-
"circle-notch", "circle-wavy", "circle-wavy-check", "circle-wavy-cross", "circle-wavy-question", "circle-wavy-time",
46-
"circle-wavy-warning", "circles-four", "circles-three", "circles-three-plus", "clipboard", "clipboard-text",
47-
"clock", "close", "cloud-arrow-down", "cloud-arrow-up", "cloud-check", "cloud-slash", "columns", "connected-arrows",
48-
"copy", "copy-simple", "credit-card", "crop", "cube", "currency-btc", "currency-circle-dollar", "currency-cny",
49-
"currency-dollar", "currency-dollar-simple", "currency-eth", "currency-eur", "currency-gbp", "currency-inr",
50-
"currency-jpy", "currency-krw", "currency-kzt", "currency-ngn", "currency-rub", "cylinder", "detective",
51-
"diamonds-four", "divide", "dots-nine", "dots-six", "dots-six-vertical", "dots-three", "dots-three-circle",
52-
"dots-three-circle-vertical", "dots-three-fill-horizontal", "dots-three-fill-vertical", "dots-three-outline",
53-
"dots-three-outline-vertical", "dots-three-vertical", "double-check", "download", "download-simple", "equals",
54-
"exam", "export", "eye", "eye-closed", "eye-slash", "file", "file-arrow-down", "file-arrow-up", "file-doc",
55-
"file-dotted", "file-image", "file-jpg", "file-lock", "file-minus", "file-pdf", "file-plus", "file-png",
56-
"file-ppt", "file-search", "file-text", "file-x", "files", "fingerprint", "fingerprint-simple", "floppy-disk",
57-
"flow-arrow", "folder", "folder-lock", "folder-minus", "folder-notch", "folder-notch-minus", "folder-notch-open",
58-
"folder-notch-plus", "folder-open", "folder-plus", "folder-simple", "folder-simple-lock", "folder-simple-minus",
59-
"folder-simple-plus", "folders", "function", "funnel", "funnel-simple", "gear", "gear-six", "gift", "gradient",
60-
"graduation-cap", "grid-four", "handbag", "handbag-simple", "hard-drive", "hard-drives", "heart-straight",
61-
"hexagon", "highlighter-circle", "home", "infinity", "info", "intersect", "kanban", "key", "keyhole", "layout",
62-
"lightning", "lightning-slash", "line-left", "line-right", "line-segment", "line-segments", "link", "link-break",
63-
"link-simple", "link-simple-break", "link-simple-horizontal", "link-simple-horizontal-break", "list",
64-
"list-bullets", "list-checks", "list-dashes", "list-numbers", "list-plus", "lock", "lock-key", "lock-key-open",
65-
"lock-laminated", "lock-laminated-open", "lock-open", "lock-simple", "lock-simple-open", "magnifying-glass-minus",
66-
"magnifying-glass-plus", "minus", "minus-circle", "money", "moon-stars", "mountains", "needle", "note",
67-
"note-blank", "note-pencil", "notebook", "notepad", "notification", "number-circle-eight", "number-circle-five",
68-
"number-circle-four", "number-circle-nine", "number-circle-one", "number-circle-seven", "number-circle-six",
69-
"number-circle-three", "number-circle-two", "number-circle-zero", "number-eight", "number-five", "number-four",
70-
"number-nine", "number-one", "number-seven", "number-six", "number-square-eight", "number-square-five",
71-
"number-square-four", "number-square-nine", "number-square-one", "number-square-seven", "number-square-six",
72-
"number-square-three", "number-square-two", "number-square-zero", "number-three", "number-two", "number-zero",
73-
"nut", "option", "package", "paper-plane-tilt", "paperclip", "paperclip-horizontal", "password", "pen",
74-
"pen-nib-straight", "pennib", "percent", "plus", "plus-minus", "pluscircle", "power", "presentation-chart",
75-
"prohibit", "prohibit-inset", "push-pin", "push-pin-simple", "push-pin-simple-slash", "push-pin-slash",
76-
"question", "radical", "receipt", "rectangle", "recycle", "rows", "scales", "scan", "search-bar", "selection",
77-
"selection-background", "selection-foreground", "selection-inverse", "selection-plus", "selection-slash",
78-
"shield", "shield-check", "shield-checkered", "shield-chevron", "shield-plus", "shield-slash", "shield-star",
79-
"shield-warning", "shopping-bag", "shopping-bag-open", "shopping-cart", "shopping-cart-simple", "short-down",
80-
"short-left", "short-right", "short-up", "sidebar", "sidebar-simple", "sign-in", "sign-out", "sort-ascending",
81-
"sort-descending", "spinner", "spinner-gap", "square", "square-half", "squares-four", "stack", "stack-simple",
82-
"star", "storefront", "student", "sun", "swap", "table", "tag", "tag-chevron", "tag-simple", "text-aa",
83-
"ticket", "toggle-left", "toggle-right", "tote", "tote-simple", "trademark-registered", "trash", "trash-simple",
84-
"tray", "trend-down", "trend-up", "triangle", "upload", "upload-simple", "user", "user-circle",
85-
"user-circle-gear", "user-circle-minus", "user-circle-plus", "user-focus", "user-gear", "user-list",
86-
"user-minus", "user-plus", "user-rectangle", "user-square", "user-switch", "users", "vault", "vignette",
87-
"wall", "wallet", "warning", "warning-circle", "warning-octagon", "wrench", "x-circle", "x-square"
88-
];
14+
// Get all available icons dynamically from generated iconPaths.json
15+
const allIcons = Object.keys(iconPaths).sort();
8916

9017
return (
9118
<ScrollView style={styles.container}>

0 commit comments

Comments
 (0)