Skip to content

Commit b32ee7d

Browse files
Karthik-B-06Karthik-B-06
committed
chore: ✨ updated example app
1 parent 3223f17 commit b32ee7d

File tree

5 files changed

+176
-132
lines changed

5 files changed

+176
-132
lines changed

‎example/src/AppRoot.tsx‎

Lines changed: 10 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,10 @@
11
import React from "react";
2-
import {
3-
Avatar,
4-
Badge,
5-
Box,
6-
Button,
7-
CaretRight,
8-
Check,
9-
Clock,
10-
Close,
11-
DefaultUser,
12-
Icon,
13-
Image,
14-
useTheme,
15-
} from "@adaptui/react-native-tailwind";
162
import { createDrawerNavigator } from "@react-navigation/drawer";
173

18-
function ButtonScreen() {
19-
const tailwind = useTheme();
20-
return (
21-
<Box
22-
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
23-
>
24-
<Button
25-
style={tailwind.style("my-1")}
26-
suffix={<Icon icon={<CaretRight />} />}
27-
>
28-
Continue
29-
</Button>
30-
<Button style={tailwind.style("my-1")} variant="outline">
31-
Get Free Resource
32-
</Button>
33-
<Button
34-
style={({ pressed }) => [
35-
tailwind.style(
36-
`my-1 bg-violet-600 ${pressed ? "bg-violet-800" : ""}`,
37-
),
38-
]}
39-
>
40-
Reply
41-
</Button>
42-
<Button
43-
prefix={<Icon icon={<DefaultUser />} />}
44-
style={({ pressed }) => [
45-
tailwind.style(`my-1 bg-green-600 ${pressed ? "bg-green-800" : ""}`),
46-
]}
47-
>
48-
Sign In
49-
</Button>
50-
<Button
51-
variant="subtle"
52-
icon={<Icon icon={<CaretRight />} />}
53-
style={tailwind.style("my-1")}
54-
/>
55-
<Button style={tailwind.style("my-1")} prefix={<Icon icon={<Image />} />}>
56-
Upload Image
57-
</Button>
58-
</Box>
59-
);
60-
}
61-
62-
function AvatarScreen() {
63-
const tailwind = useTheme();
64-
return (
65-
<Box
66-
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
67-
>
68-
<Avatar style={tailwind.style("my-1")} />
69-
<Avatar style={tailwind.style("my-1")} squared />
70-
<Avatar
71-
style={tailwind.style("my-1")}
72-
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
73-
/>
74-
<Avatar name="Sandeep Prabhakaran" style={tailwind.style("my-1")} />
75-
<Avatar
76-
style={tailwind.style("my-1")}
77-
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
78-
status="active"
79-
/>
80-
<Avatar
81-
style={tailwind.style("my-1")}
82-
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
83-
status="away"
84-
/>
85-
<Avatar
86-
style={tailwind.style("my-1")}
87-
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
88-
status="sleep"
89-
/>
90-
</Box>
91-
);
92-
}
93-
94-
function BadgeScreen() {
95-
const tailwind = useTheme();
96-
return (
97-
<Box
98-
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
99-
>
100-
<Badge style={tailwind.style("my-1")} themeColor="secondary">
101-
Scheduled
102-
</Badge>
103-
<Badge
104-
style={tailwind.style("my-1")}
105-
themeColor="primary"
106-
variant="subtle"
107-
prefix={<Icon icon={<Clock />} />}
108-
>
109-
On Progress
110-
</Badge>
111-
<Badge
112-
style={tailwind.style("my-1")}
113-
themeColor="danger"
114-
prefix={<Icon icon={<Close />} />}
115-
>
116-
Cancelled
117-
</Badge>
118-
<Badge
119-
style={tailwind.style("my-1")}
120-
themeColor="success"
121-
prefix={<Icon icon={<Check />} />}
122-
>
123-
Completed
124-
</Badge>
125-
<Badge
126-
style={tailwind.style("my-1")}
127-
variant="subtle"
128-
themeColor="secondary"
129-
>
130-
Review
131-
</Badge>
132-
</Box>
133-
);
134-
}
4+
import AvatarGroupScreen from "./modules/primitives/AvatarGroupScreen";
5+
import AvatarScreen from "./modules/primitives/AvatarScreen";
6+
import BadgeScreen from "./modules/primitives/BadgeScreen";
7+
import ButtonScreen from "./modules/primitives/ButtonScreen";
1358

1369
const Drawer = createDrawerNavigator();
13710

@@ -143,13 +16,18 @@ const AppRoot = () => {
14316
name="AvatarScreen"
14417
component={AvatarScreen}
14518
/>
19+
<Drawer.Screen
20+
options={{ title: "Avatar Group" }}
21+
name="AvatarGroupScreen"
22+
component={AvatarGroupScreen}
23+
/>
14624
<Drawer.Screen
14725
options={{ title: "Button" }}
14826
name="ButtonScreen"
14927
component={ButtonScreen}
15028
/>
15129
<Drawer.Screen
152-
options={{ title: "Badge " }}
30+
options={{ title: "Badge" }}
15331
name="BadgeScreen"
15432
component={BadgeScreen}
15533
/>

‎example/src/modules/primitives/AvatarGroupScreen.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import {
3+
Avatar,
4+
AvatarGroup,
5+
Box,
6+
useTheme,
7+
} from "@adaptui/react-native-tailwind";
8+
9+
export default function AvatarGroupScreen() {
10+
const tailwind = useTheme();
11+
return (
12+
<Box
13+
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
14+
>
15+
<AvatarGroup>
16+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=1" }} />
17+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=2" }} />
18+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=3" }} />
19+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=4" }} />
20+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=5" }} />
21+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
22+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=7" }} />
23+
</AvatarGroup>
24+
</Box>
25+
);
26+
}

‎example/src/modules/primitives/AvatarScreen.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
import { Avatar, Box, useTheme } from "@adaptui/react-native-tailwind";
3+
4+
export default function AvatarScreen() {
5+
const tailwind = useTheme();
6+
return (
7+
<Box
8+
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
9+
>
10+
<Avatar style={tailwind.style("my-1")} />
11+
<Avatar style={tailwind.style("my-1")} squared />
12+
<Avatar
13+
style={tailwind.style("my-1")}
14+
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
15+
/>
16+
<Avatar name="Sandeep Prabhakaran" style={tailwind.style("my-1")} />
17+
<Avatar
18+
style={tailwind.style("my-1")}
19+
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
20+
status="active"
21+
/>
22+
<Avatar
23+
style={tailwind.style("my-1")}
24+
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
25+
status="away"
26+
/>
27+
<Avatar
28+
style={tailwind.style("my-1")}
29+
src={{ uri: "https://i.pravatar.cc/300??img=9" }}
30+
status="sleep"
31+
/>
32+
</Box>
33+
);
34+
}

‎example/src/modules/primitives/BadgeScreen.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import {
3+
Badge,
4+
Box,
5+
Check,
6+
Clock,
7+
Close,
8+
Icon,
9+
useTheme,
10+
} from "@adaptui/react-native-tailwind";
11+
12+
export default function BadgeScreen() {
13+
const tailwind = useTheme();
14+
return (
15+
<Box
16+
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
17+
>
18+
<Badge style={tailwind.style("my-1")} themeColor="secondary">
19+
Scheduled
20+
</Badge>
21+
<Badge
22+
style={tailwind.style("my-1")}
23+
themeColor="primary"
24+
variant="subtle"
25+
prefix={<Icon icon={<Clock />} />}
26+
>
27+
On Progress
28+
</Badge>
29+
<Badge
30+
style={tailwind.style("my-1")}
31+
themeColor="danger"
32+
prefix={<Icon icon={<Close />} />}
33+
>
34+
Cancelled
35+
</Badge>
36+
<Badge
37+
style={tailwind.style("my-1")}
38+
themeColor="success"
39+
prefix={<Icon icon={<Check />} />}
40+
>
41+
Completed
42+
</Badge>
43+
<Badge
44+
style={tailwind.style("my-1")}
45+
variant="subtle"
46+
themeColor="secondary"
47+
>
48+
Review
49+
</Badge>
50+
</Box>
51+
);
52+
}

‎example/src/modules/primitives/ButtonScreen.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Button,
5+
CaretRight,
6+
DefaultUser,
7+
Icon,
8+
Image,
9+
useTheme,
10+
} from "@adaptui/react-native-tailwind";
11+
12+
export default function ButtonScreen() {
13+
const tailwind = useTheme();
14+
return (
15+
<Box
16+
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
17+
>
18+
<Button
19+
style={tailwind.style("my-1")}
20+
suffix={<Icon icon={<CaretRight />} />}
21+
>
22+
Continue
23+
</Button>
24+
<Button style={tailwind.style("my-1")} variant="outline">
25+
Get Free Resource
26+
</Button>
27+
<Button
28+
style={({ pressed }) => [
29+
tailwind.style(
30+
`my-1 bg-violet-600 ${pressed ? "bg-violet-800" : ""}`,
31+
),
32+
]}
33+
>
34+
Reply
35+
</Button>
36+
<Button
37+
prefix={<Icon icon={<DefaultUser />} />}
38+
style={({ pressed }) => [
39+
tailwind.style(`my-1 bg-green-600 ${pressed ? "bg-green-800" : ""}`),
40+
]}
41+
>
42+
Sign In
43+
</Button>
44+
<Button
45+
variant="subtle"
46+
icon={<Icon icon={<CaretRight />} />}
47+
style={tailwind.style("my-1")}
48+
/>
49+
<Button style={tailwind.style("my-1")} prefix={<Icon icon={<Image />} />}>
50+
Upload Image
51+
</Button>
52+
</Box>
53+
);
54+
}

0 commit comments

Comments
 (0)