✨ feat(#49): Credit

mobile-app/app/(tabs)/about.tsx

@@ -6,6 +6,8 @@ import { Image } from "@/components/ui/image";
 import { Center } from "@/components/ui/center";
 import DataList from "@/components/data-list";
 import { Link, LinkText } from "@/components/ui/link";
+import Credit from "@/components/credit";
+import { Box } from "@/components/ui/box";
 
 export default function AboutScreen() {
   return (
@@ -49,6 +51,10 @@ export default function AboutScreen() {
             />
           </Link>
         </Center>
+
+        <Box className="py-16">
+          <Credit />
+        </Box>
       </ScrollView>
     </SafeAreaView>
   );

mobile-app/app/(tabs)/index.native.tsx

@@ -13,12 +13,11 @@ import { $api } from "@/api-client/api";
 import { Box } from "@/components/ui/box";
 import type { components } from "@/schema/api";
 import Search from "@/components/search";
-import { Text } from "@/components/ui/text";
-import { Link, LinkText } from "@/components/ui/link";
 import Score from "@/components/score";
 import Result from "@/components/result";
 import Mode from "@/components/mode";
 import Marker from "@/components/marker";
+import Credit from "@/components/credit";
 
 export default function MapsScreen() {
   const { data: currentLocation, isLoading } = useCurrentLocation();
@@ -373,11 +372,8 @@ export default function MapsScreen() {
               destination={!!destination}
             />
 
-            <Box className="flex flex-row items-center justify-center p-1 bg-white/80 text-center mt-1">
-              <Text className="text-sm text-gray-500">&copy;&nbsp;</Text>
-              <Link href="https://www.openstreetmap.org/copyright">
-                <LinkText size="sm">OpenStreetMap contributors</LinkText>
-              </Link>
+            <Box className="max-w-[250px]">
+              <Credit />
             </Box>
           </Box>
 

mobile-app/components/credit/constants.tsx

@@ -0,0 +1,33 @@
+import { Link, LinkText } from "../ui/link";
+import { Text } from "../ui/text";
+import { Box } from "../ui/box";
+
+const SIZE = "xs";
+
+export const CREDITS = [
+  <>
+    <Text size={SIZE} className="text-gray-500" key={"osm-copyright"}>
+      &copy;&nbsp;
+    </Text>
+    <Link href="https://www.openstreetmap.org/copyright" key={"osm-link"}>
+      <LinkText size={SIZE}>OpenStreetMap contributors</LinkText>
+    </Link>
+  </>,
+  <Box
+    key={"bus-stop-information"}
+    className="flex flex-row flex-wrap border-t-gray-300 border-t pt-1 mt-1"
+  >
+    <Text size={SIZE} className="text-gray-500 w-full">
+      このアプリケーションは、以下の著作物を改変して利用しています。
+    </Text>
+    <Text size={SIZE} className="text-gray-500">
+      東京都交通局・公共交通オープンデータ協議会、バス停情報 / Bus stop
+      information、
+    </Text>
+    <Link href="https://creativecommons.org/licenses/by/4.0/deed.ja">
+      <LinkText size={SIZE}>
+        クリエイティブ・コモンズ・ライセンス　表示4.0国際
+      </LinkText>
+    </Link>
+  </Box>,
+];

mobile-app/components/credit/index.tsx

@@ -0,0 +1,13 @@
+import { Box } from "../ui/box";
+import Item from "./item";
+import { CREDITS } from "./constants";
+
+export default function Credit() {
+  return (
+    <Box className="flex flex-col p-1 bg-white/80 text-center mt-1">
+      {CREDITS.map((credit) => (
+        <Item key={credit.key}>{credit}</Item>
+      ))}
+    </Box>
+  );
+}

mobile-app/components/credit/item.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { Box } from "../ui/box";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function Item({ children }: Props) {
+  return <Box className="flex flex-row items-center">{children}</Box>;
+}

mobile-app/components/data-list/constants.ts

@@ -18,4 +18,9 @@ export const DATA_LIST: Data[] = [
     label: `${openDataSiteName} - 交通量統計表`,
     link: "https://catalog.data.metro.tokyo.lg.jp/dataset/t000022d0000000035",
   },
+  {
+    label:
+      "東京都交通局・公共交通オープンデータ協議会 - バス停情報 / Bus stop information",
+    link: "https://ckan.odpt.org/dataset/b_busstop-toei/resource/f340278d-aefe-47ea-bc8f-15ebe48c286d",
+  },
 ];