diff --git a/components/AppCard.tsx b/components/AppCard.tsx
index 6c86fce3b..35da32920 100644
--- a/components/AppCard.tsx
+++ b/components/AppCard.tsx
@@ -1,5 +1,10 @@
import Image from "next/image"
import { FormattedMessage } from "react-intl"
+import { AndroidCategory } from "../components/categories/AndroidCategory"
+import { DesktopCategory } from "../components/categories/DesktopCategory"
+import { IosCategory } from "../components/categories/IosCategory"
+import { SailfishCategory } from "../components/categories/SailfishCategory"
+import { WebCategory } from "../components/categories/WebCategory"
export type AppCardProps = {
name: React.ReactNode
@@ -12,14 +17,14 @@ export type AppCardProps = {
* Renders a card with app data.
* Layout (width, height, positioning) can be set from the parent.
*/
-export const AppCard = ({ name, icon, url, paid }) => {
+export const AppCard = (activeCategory, { name, icon, url, paid, category }) => {
return (
@@ -36,6 +41,21 @@ export const AppCard = ({ name, icon, url, paid }) => {
{name}
+ {activeCategory === 'all' ? (
+
+ {category === 'desktop' ? (
+
+ ) : category === 'web' ? (
+
+ ) : category === 'ios' ? (
+
+ ) : category === 'android' ? (
+
+ ) : category === 'sailfish' ? (
+
+ ) : '' }
+
+ ) : '' }
)
}
diff --git a/components/AppsGrid.tsx b/components/AppsGrid.tsx
index 0a6579742..f4ed35c58 100644
--- a/components/AppsGrid.tsx
+++ b/components/AppsGrid.tsx
@@ -87,7 +87,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
/>
- {sortedAndFilteredApps.map(AppCard)}
+ {sortedAndFilteredApps.map(entry => AppCard(activeCategory, entry))}
)
diff --git a/components/categories/AndroidCategory.tsx b/components/categories/AndroidCategory.tsx
new file mode 100644
index 000000000..cdae04e19
--- /dev/null
+++ b/components/categories/AndroidCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const AndroidCategory = () => {
+ const intl = useIntl()
+ return (
+
+ )
+}
diff --git a/components/categories/DesktopCategory.tsx b/components/categories/DesktopCategory.tsx
new file mode 100644
index 000000000..75c73b335
--- /dev/null
+++ b/components/categories/DesktopCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const DesktopCategory = () => {
+ const intl = useIntl()
+ return (
+
+ )
+}
diff --git a/components/categories/IosCategory.tsx b/components/categories/IosCategory.tsx
new file mode 100644
index 000000000..e76e3f7c0
--- /dev/null
+++ b/components/categories/IosCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const IosCategory = () => {
+ const intl = useIntl()
+ return (
+
+ )
+}
diff --git a/components/categories/SailfishCategory.tsx b/components/categories/SailfishCategory.tsx
new file mode 100644
index 000000000..d33c1e6a8
--- /dev/null
+++ b/components/categories/SailfishCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const SailfishCategory = () => {
+ const intl = useIntl()
+ return (
+
+ )
+}
diff --git a/components/categories/WebCategory.tsx b/components/categories/WebCategory.tsx
new file mode 100644
index 000000000..2d18fd539
--- /dev/null
+++ b/components/categories/WebCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const WebCategory = () => {
+ const intl = useIntl()
+ return (
+
+ )
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index e84f15182..a6d7f954e 100755
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -131,3 +131,12 @@
@apply bg-blurple-500;
}
}
+
+span.app-category {
+ right: 0;
+}
+
+html[dir="rtl"] span.app-category {
+ left: 0;
+ right: auto;
+}