Skip to content

Commit e7bc3c8

Browse files
emon5122emon5122
committed
I am too dumb to use regular css now, tailwind is the way to go
1 parent 4219602 commit e7bc3c8

18 files changed

+547
-327
lines changed

‎app/+not-found.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
import { Link, Stack } from "expo-router";
22
import React from "react";
3-
import { StyleSheet, Text, View } from "react-native";
3+
import { Text, View } from "react-native";
44

55
export default function NotFoundScreen() {
66
return (
77
<>
88
<Stack.Screen options={{ title: "Oops!" }} />
9-
<View style={styles.container}>
10-
<Text>This screen doesn't exist.</Text>
11-
<Link href="/" style={styles.link}>
12-
<Text>Go to Game Board!</Text>
9+
<View className="flex-1 items-center justify-center p-8 bg-gray-50">
10+
<Text className="text-4xl font-bold text-gray-800 mb-4">
11+
404
12+
</Text>
13+
<Text className="text-lg text-gray-600 mb-8">
14+
This page doesn't exist.
15+
</Text>
16+
<Link
17+
href="/"
18+
className="bg-blue-500 rounded-lg px-6 py-3 shadow-md active:bg-blue-600"
19+
>
20+
<Text className="text-white font-semibold">
21+
Go to Game Board
22+
</Text>
1323
</Link>
1424
</View>
1525
</>
1626
);
1727
}
18-
19-
const styles = StyleSheet.create({
20-
container: {
21-
flex: 1,
22-
alignItems: "center",
23-
justifyContent: "center",
24-
padding: 20,
25-
},
26-
link: {
27-
marginTop: 15,
28-
paddingVertical: 15,
29-
},
30-
});

‎app/_layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import * as SplashScreen from "expo-splash-screen";
88
import { useEffect } from "react";
99
import { SafeAreaView } from "react-native";
1010
import "react-native-reanimated";
11+
import "../global.css";
1112

1213
SplashScreen.preventAutoHideAsync();
1314

‎app/news.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,16 @@ import { ScrollView, View } from "react-native";
44

55
const NewsScreen = () => {
66
const data = newsMockData;
7+
78
return (
8-
<View
9-
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
10-
>
11-
<ScrollView>
12-
{data.map((item, index) => {
13-
return (
14-
<View key={index}>
15-
<NewsCard {...item} />
16-
<View
17-
style={{
18-
height: 1.5,
19-
width: "80%",
20-
backgroundColor: "#EEEEEE",
21-
marginVertical: 10,
22-
}}
23-
/>
24-
</View>
25-
);
26-
})}
9+
<View className="flex-1 justify-center items-center">
10+
<ScrollView className="w-full px-4">
11+
{data.map((item, index) => (
12+
<View key={index}>
13+
<NewsCard {...item} />
14+
<View className="h-[1.5px] w-4/5 bg-[#EEEEEE] mx-auto my-2.5" />
15+
</View>
16+
))}
2717
</ScrollView>
2818
</View>
2919
);

‎babel.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = function (api) {
2+
api.cache(true);
3+
return {
4+
presets: [
5+
["babel-preset-expo", { jsxImportSource: "nativewind" }],
6+
"nativewind/babel",
7+
],
8+
};
9+
};

‎components/chat/others-chat.tsx‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ const OthersChat = () => {
44
const { height } = useWindowDimensions();
55

66
return (
7-
<View style={styles.othersChatContainer}>
8-
<View style={styles.ChatContainer}>
9-
<Text style={styles.text}>
7+
<View className="flex-row mx-4 my-2.5">
8+
<View className="relative max-w-[75%] bg-white border border-[#EEEEEE] rounded-xl p-3">
9+
<Text className="text-black text-base font-[Rubik_400Regular] leading-5">
1010
Lorem ipsum dolor sit amet consectetur adipisicing elit.
1111
Minus, labore neque perferendis id dolor minima ad aliquam
1212
ex, sed debitis quos, unde animi. Et eligendi quas magnam
@@ -40,26 +40,6 @@ const OthersChat = () => {
4040
};
4141

4242
const styles = StyleSheet.create({
43-
othersChatContainer: {
44-
flexDirection: "row",
45-
marginVertical: 10,
46-
marginHorizontal: 15,
47-
},
48-
ChatContainer: {
49-
maxWidth: "75%",
50-
backgroundColor: "#FFFFFF",
51-
borderWidth: 1,
52-
borderColor: "#EEEEEE",
53-
borderRadius: 10,
54-
padding: 12,
55-
position: "relative",
56-
},
57-
text: {
58-
color: "black",
59-
fontSize: 16,
60-
fontFamily: "Rubik_400Regular",
61-
lineHeight: 20,
62-
},
6343
triangle: {
6444
width: 0,
6545
height: 0,
@@ -73,15 +53,9 @@ const styles = StyleSheet.create({
7353
},
7454
triangleBorder: {
7555
borderTopColor: "#CFD8DC",
76-
borderLeftWidth: 8,
77-
borderRightWidth: 8,
78-
borderTopWidth: 8,
7956
},
8057
triangleFill: {
8158
borderTopColor: "#FFFFFF",
82-
borderLeftWidth: 7,
83-
borderRightWidth: 7,
84-
borderTopWidth: 7,
8559
left: -11,
8660
bottom: 9,
8761
},

‎components/chat/self-chat.tsx‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ const SelfChat = () => {
55
const { height } = useWindowDimensions();
66

77
return (
8-
<View style={styles.selfChatContainer}>
8+
<View className="flex-row justify-end items-end pr-5 mb-2.5">
99
<LinearGradient
1010
colors={["#34506D", "#3498DB"]}
1111
start={{ x: 0, y: 0 }}
1212
end={{ x: 1, y: 0 }}
13-
style={styles.gradientContainer}
13+
className="relative max-w-[75%] p-2.5 border border-[#EEEEEE] rounded-xl"
1414
>
15-
<Text style={styles.text}>
15+
<Text className="text-white text-base font-[Rubik_400Regular]">
1616
Lorem ipsum dolor sit amet consectetur adipisicing elit.
1717
Minus, labore neque perferendis id dolor minima ad aliquam
1818
ex, sed debitis quos, unde animi. Et eligendi quas magnam
@@ -34,26 +34,6 @@ const SelfChat = () => {
3434
};
3535

3636
const styles = StyleSheet.create({
37-
selfChatContainer: {
38-
flexDirection: "row",
39-
justifyContent: "flex-end",
40-
alignItems: "flex-end",
41-
paddingRight: 20,
42-
marginBottom: 10,
43-
},
44-
gradientContainer: {
45-
maxWidth: "75%",
46-
padding: 10,
47-
borderWidth: 1,
48-
borderColor: "#EEEEEE",
49-
borderRadius: 10,
50-
position: "relative",
51-
},
52-
text: {
53-
color: "#fff",
54-
fontSize: 16,
55-
fontFamily: "Rubik_400Regular",
56-
},
5737
triangle: {
5838
width: 0,
5939
height: 0,

‎components/footer.tsx‎

Lines changed: 71 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,85 @@
1-
import { Styles } from "@/constants/Colors";
21
import { Link, usePathname } from "expo-router";
3-
import { StyleSheet, Text, View } from "react-native";
2+
import { Text, View } from "react-native";
43
import GameBoardIcon from "./icons/gameBoard";
54
import NewsIcon from "./icons/news";
65
import RankIcon from "./icons/rank";
76
import RegisterIcon from "./icons/register";
87

8+
type TabItemProps = {
9+
icon: React.ComponentType<{ size: number }>;
10+
label: string;
11+
href?: string;
12+
disabled?: boolean;
13+
isActive?: boolean;
14+
};
15+
16+
type TabType = {
17+
icon: React.ComponentType<{ size: number; color?: string }>;
18+
label: string;
19+
href?: string;
20+
disabled?: boolean;
21+
};
22+
23+
const ICON_SIZE = 20;
24+
25+
const TABS: TabType[] = [
26+
{ icon: RegisterIcon, label: "Register", disabled: true },
27+
{ icon: GameBoardIcon, label: "Game Board", href: "/" },
28+
{ icon: RankIcon, label: "Rank", disabled: true },
29+
{ icon: NewsIcon, label: "News", href: "/news" },
30+
];
31+
932
export const Footer = () => {
1033
const path = usePathname();
1134

12-
if (path === "/chat") {
13-
return null;
14-
}
35+
if (path === "/chat") return null;
1536

16-
return (
17-
<View style={styles.footer}>
18-
<View style={styles.disabledTab}>
19-
<RegisterIcon size={20} />
20-
<Text style={styles.tabText}>Register</Text>
37+
const TabItem = ({
38+
icon: Icon,
39+
label,
40+
href,
41+
disabled = false,
42+
isActive = false,
43+
}: TabItemProps) => {
44+
const content = (
45+
<View
46+
className={`flex-col items-center p-2.5
47+
${disabled ? "opacity-50" : ""}
48+
${isActive ? "opacity-100" : "opacity-70"}`}
49+
>
50+
<Icon size={ICON_SIZE} />
51+
<Text className="text-white font-[Rubik_400Regular] text-sm mt-1.5">
52+
{label}
53+
</Text>
2154
</View>
22-
<Link href="/" style={styles.resetLink}>
23-
<View style={styles.tab}>
24-
<GameBoardIcon size={20} />
25-
<Text style={styles.tabText}>Game Board</Text>
26-
</View>
27-
</Link>
28-
<View style={styles.disabledTab}>
29-
<RankIcon size={20} />
30-
<Text style={styles.tabText}>Rank</Text>
31-
</View>
32-
<Link href="/news" style={styles.resetLink}>
33-
<View style={styles.tab}>
34-
<NewsIcon size={20} />
35-
<Text style={styles.tabText}>News</Text>
36-
</View>
37-
</Link>
55+
);
56+
57+
if (href) {
58+
return (
59+
<Link
60+
href={href as "/chat" | "/"}
61+
className="no-underline p-0 m-0"
62+
>
63+
{content}
64+
</Link>
65+
);
66+
}
67+
68+
return content;
69+
};
70+
71+
return (
72+
<View className="flex-row justify-around items-center bg-[#1F1B1B] w-full h-[8%]">
73+
{TABS.map((tab, index) => (
74+
<TabItem
75+
key={index}
76+
icon={tab.icon}
77+
label={tab.label}
78+
href={tab.href}
79+
disabled={tab.disabled}
80+
isActive={tab.href ? path === tab.href : false}
81+
/>
82+
))}
3883
</View>
3984
);
4085
};
41-
42-
const styles = StyleSheet.create({
43-
resetLink: {
44-
textDecorationLine: "none",
45-
padding: 0,
46-
margin: 0,
47-
},
48-
footer: {
49-
flexDirection: "row",
50-
justifyContent: "space-around",
51-
alignItems: "center",
52-
backgroundColor: Styles.colour.backgroundColour,
53-
width: "100%",
54-
height: "8%",
55-
},
56-
tab: {
57-
flexDirection: "column",
58-
alignItems: "center",
59-
padding: 10,
60-
},
61-
tabText: {
62-
color: "white",
63-
fontFamily: "Rubik_400Regular",
64-
fontSize: 14,
65-
marginTop: 5,
66-
},
67-
disabledTab: {
68-
flexDirection: "column",
69-
alignItems: "center",
70-
opacity: 0.5,
71-
padding: 10,
72-
},
73-
});

0 commit comments

Comments
 (0)