feat: app store

web/src/components/cards/AppStoreCard.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { useTranslation } from 'react-i18next'
+import { FaAppStore } from 'react-icons/fa'
+
+import { Card, Result } from '../Cards'
+
+function Search({ query }) {
+  const term = encodeURIComponent(query)
+  const response = useFetch(`/availability/appstore/${term}`)
+  const apps = response.result
+
+  return (
+    <div>
+      {apps.map((app) => (
+        <Result
+          title={app.name}
+          message={`Price: ${app.price}`}
+          link={app.viewURL}
+          icon={<FaAppStore />}
+          key={app.id}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function AppStoreCard({ query }) {
+  const { t } = useTranslation()
+
+  return (
+    <Card title={t('providers.appStore')}>
+      <Search query={query} />
+    </Card>
+  )
+}