@@ -11,13 +11,10 @@ import CustomAppearanceContext from '~/context/CustomAppearanceContext';
1111
1212export default function Tools ( ) {
1313 const { isDark } = useContext ( CustomAppearanceContext ) ;
14+
1415 const textColorStyle = {
1516 color : isDark ? colors . gray2 : colors . black ,
1617 } ;
17-
18- const primaryButtonColorStyle = {
19- backgroundColor : isDark ? darkColors . primaryDark : colors . primary ,
20- } ;
2118 const buttonColorStyle = {
2219 backgroundColor : isDark ? darkColors . border : colors . gray3 ,
2320 color : isDark ? colors . white : colors . black ,
@@ -41,12 +38,7 @@ export default function Tools() {
4138 package inside the built-in editor Command Palette.
4239 </ P >
4340 < View style = { styles . buttonsContainer } >
44- < Button
45- openInNewTab
46- href = "https://github.com/react-native-community/vscode-react-native-directory"
47- style = { [ styles . button , primaryButtonColorStyle ] } >
48- < GitHub width = { 16 } /> < span > GitHub</ span >
49- </ Button >
41+ < GitHubButton href = "https://github.com/react-native-community/vscode-react-native-directory" />
5042 < Button
5143 openInNewTab
5244 href = "https://marketplace.visualstudio.com/items?itemName=react-native-directory.vscode-react-native-directory"
@@ -65,12 +57,7 @@ export default function Tools() {
6557 A searchable and filterable list of React Native libraries inside Raycast.
6658 </ P >
6759 < View style = { styles . buttonsContainer } >
68- < Button
69- openInNewTab
70- href = "https://github.com/raycast/extensions/tree/main/extensions/react-native-directory"
71- style = { [ styles . button , primaryButtonColorStyle ] } >
72- < GitHub width = { 16 } /> < span > GitHub</ span >
73- </ Button >
60+ < GitHubButton href = "https://github.com/raycast/extensions/tree/main/extensions/react-native-directory" />
7461 < Button
7562 openInNewTab
7663 href = "https://www.raycast.com/shubh_porwal/react-native-directory"
@@ -83,12 +70,7 @@ export default function Tools() {
8370 CLI to check your Expo project for known issues and used libraries compatibility.
8471 </ P >
8572 < View style = { styles . buttonsContainer } >
86- < Button
87- openInNewTab
88- href = "https://github.com/expo/expo/tree/main/packages/expo-doctor"
89- style = { [ styles . button , primaryButtonColorStyle ] } >
90- < GitHub width = { 16 } /> < span > GitHub</ span >
91- </ Button >
73+ < GitHubButton href = "https://github.com/expo/expo/tree/main/packages/expo-doctor" />
9274 < Button
9375 openInNewTab
9476 href = "https://www.npmjs.com/package/expo-doctor"
@@ -102,19 +84,14 @@ export default function Tools() {
10284 at once, get detailed insights, and export reports.
10385 </ P >
10486 < View style = { styles . buttonsContainer } >
105- < Button
106- openInNewTab
107- href = "https://github.com/sandipshiwakoti/react-native-package-checker"
108- style = { [ styles . button , primaryButtonColorStyle ] } >
109- < GitHub width = { 16 } /> < span > GitHub</ span >
110- </ Button >
87+ < GitHubButton href = "https://github.com/sandipshiwakoti/react-native-package-checker" />
11188 < Button
11289 openInNewTab
11390 href = "https://react-native-package-checker.vercel.app/"
11491 style = { [ styles . button , buttonColorStyle ] } >
11592 < span > Website</ span >
11693 </ Button >
117- </ View > { ' ' }
94+ </ View >
11895 < H3 style = { [ styles . subHeader , textColorStyle ] } >
11996 React Native Package Checker VS Code Extension
12097 </ H3 >
@@ -123,12 +100,7 @@ export default function Tools() {
123100 inside VS Code.
124101 </ P >
125102 < View style = { styles . buttonsContainer } >
126- < Button
127- openInNewTab
128- href = "https://github.com/sandipshiwakoti/vscode-react-native-package-checker"
129- style = { [ styles . button , primaryButtonColorStyle ] } >
130- < GitHub width = { 16 } /> < span > GitHub</ span >
131- </ Button >
103+ < GitHubButton href = "https://github.com/sandipshiwakoti/vscode-react-native-package-checker" />
132104 < Button
133105 openInNewTab
134106 href = "https://marketplace.visualstudio.com/items?itemName=sandipshiwakoti.vscode-react-native-package-checker"
@@ -149,6 +121,26 @@ export default function Tools() {
149121 ) ;
150122}
151123
124+ type GitHubButtonProps = {
125+ href : string ;
126+ } ;
127+
128+ function GitHubButton ( { href } : GitHubButtonProps ) {
129+ const { isDark } = useContext ( CustomAppearanceContext ) ;
130+ const primaryButtonColorStyle = {
131+ backgroundColor : isDark ? darkColors . primaryDark : colors . primary ,
132+ } ;
133+ return (
134+ < Button
135+ openInNewTab
136+ href = "https://github.com/raycast/extensions/tree/main/extensions/react-native-directory"
137+ style = { [ styles . button , primaryButtonColorStyle ] } >
138+ < GitHub width = { 16 } />
139+ < P style = { styles . githubButtonLabel } > GitHub</ P >
140+ </ Button >
141+ ) ;
142+ }
143+
152144const styles = StyleSheet . create ( {
153145 container : {
154146 marginTop : 32 ,
@@ -176,6 +168,10 @@ const styles = StyleSheet.create({
176168 paddingHorizontal : 12 ,
177169 minHeight : 32 ,
178170 fontSize : 14 ,
179- gap : 2 ,
171+ gap : 6 ,
172+ } ,
173+ githubButtonLabel : {
174+ color : 'inherit' ,
175+ fontSize : 14 ,
180176 } ,
181177} ) ;
0 commit comments