mastodon · userquin · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023
diff --git 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 (
     <a
       key={url}
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex items-stretch justify-start gap-4 rounded border border-gray-3 bg-white p-2 hover:bg-gray-4 md:p-4"
+      className="flex items-stretch justify-start gap-4 rounded border border-gray-3 bg-white p-2 hover:bg-gray-4 md:p-4 relative"
     >
       <div className="h-[3.5rem] w-[3.5rem] flex-shrink-0 overflow-hidden rounded-sm">
         <Image src={icon} alt={`Logo for ${name}`} />
@@ -36,6 +41,21 @@ export const AppCard = ({ name, icon, url, paid }) => {
           <span dir="ltr">{name}</span>
         </h3>
       </div>
+      {activeCategory === 'all' ? (
+        <span className="app-category absolute top-0 p-1 text-blurple-500">
+          {category === 'desktop' ? (
+            <DesktopCategory />
+          ) : category === 'web' ? (
+            <WebCategory />
+          ) : category === 'ios' ? (
+            <IosCategory />
+          ) : category === 'android' ? (
+            <AndroidCategory />
+          ) : category === 'sailfish' ? (
+            <SailfishCategory />
+          ) : '' }
+        </span>
+      ) : '' }
     </a>
   )
 }
diff --git a/components/AppsGrid.tsx b/components/AppsGrid.tsx
@@ -87,7 +87,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
         />
       </div>
       <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
-        {sortedAndFilteredApps.map(AppCard)}
+        {sortedAndFilteredApps.map(entry => AppCard(activeCategory, entry))}
       </div>
     </div>
   )

diff --git a/components/categories/AndroidCategory.tsx b/components/categories/AndroidCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const AndroidCategory = () => {
+  const intl = useIntl()
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <title>{intl.formatMessage({ id: "browse_apps.android", defaultMessage: "Android" })}</title>
+      <path fill="currentColor" d="M1 18q.225-2.675 1.638-4.925Q4.05 10.825 6.4 9.5L4.55 6.3q-.15-.225-.075-.475q.075-.25.325-.375q.2-.125.45-.05t.4.3L7.5 8.9Q9.65 8 12 8t4.5.9l1.85-3.2q.15-.225.4-.3q.25-.075.45.05q.25.125.325.375q.075.25-.075.475L17.6 9.5q2.35 1.325 3.763 3.575Q22.775 15.325 23 18Zm6-2.75q.525 0 .888-.363q.362-.362.362-.887t-.362-.887Q7.525 12.75 7 12.75t-.887.363q-.363.362-.363.887t.363.887q.362.363.887.363Zm10 0q.525 0 .888-.363q.362-.362.362-.887t-.362-.887q-.363-.363-.888-.363t-.887.363q-.363.362-.363.887t.363.887q.362.363.887.363Z"/>
+    </svg>
+  )
+}
diff --git a/components/categories/DesktopCategory.tsx b/components/categories/DesktopCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const DesktopCategory = () => {
+  const intl = useIntl()
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <title>{intl.formatMessage({ id: "browse_apps.desktop", defaultMessage: "Desktop" })}</title>
+      <path fill="currentColor" d="M8 21v-2h2v-2H4q-.825 0-1.412-.587Q2 15.825 2 15V5q0-.825.588-1.413Q3.175 3 4 3h16q.825 0 1.413.587Q22 4.175 22 5v10q0 .825-.587 1.413Q20.825 17 20 17h-6v2h2v2Zm-4-6h16V5H4v10Zm0 0V5v10Z"/>
+    </svg>
+  )
+}
diff --git a/components/categories/IosCategory.tsx b/components/categories/IosCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const IosCategory = () => {
+  const intl = useIntl()
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <title>{intl.formatMessage({ id: "browse_apps.ios", defaultMessage: "iOS" })}</title>
+      <path fill="currentColor" d="M2.09 16.8h1.66V9.76H2.09m.83-.92a.9.9 0 0 0 .92-.9c0-.5-.4-.9-.92-.9a.9.9 0 0 0-.92.9c0 .5.4.9.92.9m6.33-1.78C6.46 7.06 4.7 8.96 4.7 12c0 3.06 1.76 4.96 4.55 4.96s4.55-1.9 4.55-4.96c0-3.04-1.76-4.94-4.55-4.94m0 1.44c1.71 0 2.8 1.37 2.8 3.5c0 2.15-1.09 3.5-2.8 3.5c-1.71 0-2.79-1.35-2.79-3.5c0-2.13 1.08-3.5 2.79-3.5m5.25 5.61c.07 1.76 1.5 2.85 3.72 2.85c2.32 0 3.78-1.14 3.78-2.96c0-1.43-.82-2.23-2.77-2.68l-1.1-.25c-1.18-.28-1.66-.65-1.66-1.29c0-.78.73-1.33 1.81-1.33c1.1 0 1.85.55 1.93 1.44h1.63c-.04-1.69-1.43-2.83-3.55-2.83c-2.08 0-3.56 1.15-3.56 2.85c0 1.37.83 2.22 2.6 2.62l1.24.29c1.21.29 1.7.68 1.7 1.38c0 .8-.8 1.37-1.96 1.37s-2.05-.57-2.15-1.46H14.5Z"/>
+    </svg>
+  )
+}
diff --git a/components/categories/SailfishCategory.tsx b/components/categories/SailfishCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const SailfishCategory = () => {
+  const intl = useIntl()
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 240 240" fill="none">
+      <title>{intl.formatMessage({ id: "browse_apps.sailfish", defaultMessage: "SailfishOS" })}</title>
+      <path d="M232.48 56.8C232 55.36 230.4 54.72 228.96 55.2L208.96 62.4C200.48 65.12 190.72 68 182.4 69.6C164.16 73.12 151.2 57.92 151.04 57.76C150.24 56.8 149.12 56.48 148 56.96C147.68 57.12 146.4 57.6 144.16 58.56C146.4 37.44 158.56 16.64 158.56 16.48C159.2 15.52 159.04 14.08 158.24 13.28C157.44 12.32 156.16 12.16 155.04 12.64C154.4 12.96 137.12 21.12 118.88 35.2C94.4001 54.4 80.9601 74.4 79.2001 94.56C77.7601 110.88 88.1601 121.28 98.2401 131.52L100 133.28C103.36 142.4 102.56 152.96 97.6001 164.32C88.8001 184.48 68.8001 202.08 44.3201 211.52C36.4801 214.56 30.0801 216.8 29.9201 216.8C28.4801 217.28 27.8401 218.72 28.1601 220.16C28.4801 221.44 29.6001 222.24 30.8801 222.24H31.3601C35.5201 221.44 61.7601 214.56 87.3601 201.6C89.1201 200.8 90.8801 199.84 92.4801 198.88C124.16 181.92 141.12 162.24 143.04 140.32C144.32 126.4 136.32 117.12 127.52 108.64C138.56 92.8 174.24 80.48 174.72 80.32L210.08 67.68C221.28 64 230.08 60.48 230.72 60.32C232.32 59.68 233.12 58.08 232.48 56.8ZM125.92 36.8C135.04 30.08 143.84 24.8 149.76 21.44C145.44 30.4 139.36 45.76 138.4 61.28C129.44 65.92 116.48 73.92 108.48 85.12C106.88 81.12 106.08 76.8 106.56 71.68C107.84 56.96 123.52 39.52 125.92 36.8ZM89.9201 194.08C84.3201 197.12 78.5601 199.84 72.9601 202.24C86.4001 192.48 96.9601 180 102.88 166.4C106.72 157.6 108.32 149.12 107.52 141.28C112.32 147.2 115.52 153.44 114.88 160.96C113.12 180.16 90.2401 193.92 89.9201 194.08ZM137.76 139.68C136.48 154.72 127.04 167.52 114.24 178.08C117.28 173.28 119.52 167.68 120.16 161.44C121.44 147.04 111.68 137.12 102.24 127.68C92.6401 117.92 83.5201 108.8 84.8001 95.04C86.2401 79.04 95.8401 64.64 107.68 52.64C104.32 58.56 101.76 65.12 101.12 71.36C99.5201 89.12 110.88 100 120.96 109.44C130.24 118.24 138.88 126.72 137.76 139.68ZM123.84 104.64C119.2 100.16 114.72 95.84 111.36 90.72C120.64 75.36 142.08 65.28 148.16 62.72C151.36 66.08 160.16 73.76 172.48 75.2C167.52 77.12 135.68 88.64 123.84 104.64Z" fill="currentColor" stroke="currentColor" strokeWidth="6"/>
+    </svg>
+  )
+}
diff --git a/components/categories/WebCategory.tsx b/components/categories/WebCategory.tsx
@@ -0,0 +1,11 @@
+import { useIntl } from "react-intl"
+
+export const WebCategory = () => {
+  const intl = useIntl()
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <title>{intl.formatMessage({ id: "browse_apps.web", defaultMessage: "Web" })}</title>
+      <path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2c0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2c0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2c0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2c0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/>
+    </svg>
+  )
+}
diff --git 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;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,7 +87,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => { @@
             />
           </div>
           <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
-            {sortedAndFilteredApps.map(AppCard)}
+            {sortedAndFilteredApps.map(entry => AppCard(activeCategory, entry))}
           </div>
         </div>
       )
@@ Expand Down @@