feat(Badge): common components

src/components/Badge/HasIconBadge.tsx

@@ -1,17 +1,18 @@
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
 import Octicons from 'react-native-vector-icons/Octicons';
 
 type Props = {
     hasBadge: boolean;
     name: string;
+    count?: number
+    color?: string;
 }
 export default (props: Props) => {
-    const { hasBadge, name } = props;
-
+    const { hasBadge, name, count, color = "#fff" } = props;
     return (
         hasBadge &&
         <View style={{
-         flexDirection: 'row',
+            flexDirection: 'row',
             alignItems: 'center',
             alignSelf: 'flex-start',
             borderRadius: 4,
@@ -21,7 +22,8 @@ export default (props: Props) => {
             paddingVertical: 4,
             gap: 8
         }}>
-            <Octicons testID='badgeIcon' name={name} color="#fff" size={14} />
+            <Octicons testID='badgeIcon' name={name} color={color} size={14} />
+            {count != undefined && <Text style={{ color: '#fff', fontSize: 12 }}>{count ?? 0}</Text>}
         </View>
     );
 };

src/components/Badge/LanguageBadge.tsx

@@ -0,0 +1,27 @@
+import { Text, View } from 'react-native';
+import Octicons from 'react-native-vector-icons/Octicons';
+
+type Props = {
+    name: string;
+    color: string;
+}
+export default (props: Props) => {
+    const { name, color } = props;
+    return (
+        name !== undefined &&
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            borderRadius: 4,
+            borderWidth: 1,
+            borderColor: '#e0e0e0',
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            gap: 8
+        }}>
+            <Octicons testID='badgeIcon' name={"file-code"} color={color} size={14} />
+            <Text style={{ color: '#fff', fontSize: 12 }}>{name}</Text>
+        </View>
+    );
+};

src/components/Badge/RepoBadgeList.tsx

@@ -0,0 +1,25 @@
+import { View } from "react-native"
+import { Repository } from "../../types/response"
+import HasIconBadge from "./HasIconBadge"
+import LanguageBadge from "./LanguageBadge"
+
+type Prop = {
+    repository: Repository
+}
+
+export default ({ repository }: Prop) => {
+    return (
+        <View style={{
+            marginTop: 12,
+            flexDirection: 'row',
+            gap: 8,
+            flexWrap: 'wrap',
+            alignContent: 'center',
+            justifyContent: 'flex-start'
+        }}>
+            <HasIconBadge hasBadge name='star-fill' color='#E2B340' count={repository.stargazerCount} />
+            <HasIconBadge hasBadge name='git-branch' count={repository.forkCount} />
+            <LanguageBadge {...repository.primaryLanguage} />
+        </View>
+    )
+}

src/components/Badge/RepositoryBadge.tsx

@@ -2,7 +2,7 @@ import { Text, View } from 'react-native';
 import Octicons from 'react-native-vector-icons/Octicons';
 
 type Props = {
-    count: number;
+    count?: number;
 }
 
 export default ({ count }: Props) => {
@@ -19,7 +19,7 @@ export default ({ count }: Props) => {
             gap: 8
         }}>
             <Octicons name="repo" color="#fff" size={14} />
-            <Text style={{ color: '#fff' }}>{count}</Text>
+            <Text style={{ color: '#fff', fontSize: 12 }}>{count ?? 0}</Text>
         </View>
     );
 };

src/components/Badge/UserBadgeList.tsx

@@ -0,0 +1,20 @@
+import { View } from "react-native"
+import RepositoryBadge from "./RepositoryBadge"
+import HasIconBadge from "./HasIconBadge"
+import { User } from "../../types/response"
+
+type Prop = {
+    user: User
+}
+
+export default ({ user }: Prop) => {
+    return (
+        <View style={{ marginTop: 12, flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignContent: 'center', justifyContent: 'flex-start' }}>
+            <RepositoryBadge count={user.repositories?.totalCount ?? 0} />
+            <HasIconBadge count={user.followers?.totalCount} name='people' hasBadge />
+            <HasIconBadge hasBadge={user.isDeveloperProgramMember} name="cpu" />
+            <HasIconBadge hasBadge={user.isGitHubStar} name="star-fill" />
+            <HasIconBadge hasBadge={user.hasSponsorsListing} name="code-of-conduct" />
+        </View>
+    )
+}