update nav icon

chumaumenze · Dec 9, 2023 · d8dcdbf · d8dcdbf
1 parent 7dff6bd
commit d8dcdbf
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 192 deletions.
diff --git a/src/app/expo/_layout.tsx b/src/app/expo/_layout.tsx
@@ -2,7 +2,7 @@ import Layout from '@/components/Layout';
 import { Slot } from 'expo-router';
 
 export const unstable_settings = {
-  initialRouteName: 'universal-links',
+  initialRouteName: 'showcase',
 };
 
 export default function ExpoLayout() {

diff --git a/src/app/expo/search.tsx b/src/app/expo/search.tsx
diff --git a/src/app/expo/showcase.tsx b/src/app/expo/showcase.tsx
@@ -25,17 +25,6 @@ function sortByFramework(a: AppItem, b: AppItem) {
   return 0;
 }
 
-const A = 'a';
-const B = 'b';
-const H1 = 'h1';
-const Span = 'span';
-const Div = 'div';
-const P = 'p';
-const H2 = 'h2';
-const H3 = 'h3';
-const Img = 'img';
-const BR = 'br';
-
 export default function Showcase() {
   const apps = useMemo(() => {
     return Object.entries(getAppStoreData())
@@ -71,16 +60,16 @@ export default function Showcase() {
 
   return (
     <>
-      <Div className="relative flex flex-col">
-        <Div className="mx-auto">
-          <Div className="p-8">
-            <H1 className="text-4xl text-slate-50 md:text-5xl lg:text-6xl my-2 md:my-4 font-bold">
+      <div className="relative flex flex-col">
+        <div className="mx-auto">
+          <div className="p-8">
+            <h1 className="text-4xl text-slate-50 md:text-5xl lg:text-6xl my-2 md:my-4 font-bold">
               Expo Open Source Showcase
-            </H1>
-            <H3 className="text-1xl text-slate-50 md:text-2xl mb-2">
-              Top ranked iOS Apps using <B>Expo Open Source software</B>
+            </h1>
+            <h3 className="text-1xl text-slate-50 md:text-2xl mb-2">
+              Top ranked iOS Apps using <b>Expo Open Source software</b>
               .
-              <BR />
+              <br />
               This includes the{' '}
               <ExpoIcon
                 fill="white"
@@ -90,55 +79,55 @@ export default function Showcase() {
                 }}
                 width={'1.5rem'}
               />{' '}
-              <A className="underline" href="https://expo.dev" target="_blank">
+              <a className="underline" href="https://expo.dev" target="_blank">
                 Expo SDK
-              </A>{' '}
+              </a>{' '}
               and{' '}
               <ReactNavigationIcon
                 className="inline "
-                stroke="white"
+                fill="white"
                 style={{
                   marginTop: -3,
                 }}
                 width={'1.5rem'}
               />{' '}
-              <A
+              <a
                 className="underline"
                 href="https://reactnavigation.org/"
                 target="_blank"
               >
                 React Navigation.
-              </A>
-            </H3>
-          </Div>
+              </a>
+            </h3>
+          </div>
           {apps.map(([category, apps]) => (
-            <Div key={category} className="flex flex-col gap-y-1">
-              <Div className="flex flex-row px-8 gap-y-1 mb-4 items-center">
-                <Div className="flex flex-row items-center">
-                  <H2 className="font-bold text-slate-50 text-2xl md:text-3xl lg:text-4xl">
+            <div key={category} className="flex flex-col gap-y-1">
+              <div className="flex flex-row px-8 gap-y-1 mb-4 items-center">
+                <div className="flex flex-row items-center">
+                  <h2 className="font-bold text-slate-50 text-2xl md:text-3xl lg:text-4xl">
                     {ITUNES_GENRE_TO_CATEGORY[category] ?? category}
-                  </H2>
+                  </h2>
                   {category !== 'top' && (
-                    <Img
+                    <img
                       src={'/categories/' + category + '.avif'}
                       className="pl-2 w-8"
                     />
                   )}
-                </Div>
-                <Span className="flex-1 border-b border-dotted border-slate-800 mx-2 md:mx-3 min-w-[2rem]" />
+                </div>
+                <span className="flex-1 border-b border-dotted border-slate-800 mx-2 md:mx-3 min-w-[2rem]" />
 
-                <P className="text-gray-500">
+                <p className="text-gray-500">
                   {apps.map(apps => apps).flat().length} Apps
-                </P>
-              </Div>
+                </p>
+              </div>
               <Row
                 title={ITUNES_GENRE_TO_CATEGORY[category] ?? category}
                 apps={apps.flat()}
               />
-            </Div>
+            </div>
           ))}
-        </Div>
-      </Div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/showcase/app-button.tsx b/src/components/showcase/app-button.tsx
@@ -3,27 +3,23 @@ import { ExpoIcon, ReactNavigationIcon } from '@/components/showcase/icons';
 import { AppItem, getFrameworks } from '@/data/getAppStoreData';
 import React from 'react';
 
-const Div = 'div';
-const A = 'a';
-const H3 = 'h3';
-const Span = 'span';
 const altSafe = (name: string) => name.replace('–', '-').replace('’', "'");
 
 export function AppButton({ app }: { app: Partial<AppItem> }) {
   const iconSize = 24;
   const frameworks = getFrameworks(app);
   return (
-    <A
+    <a
       key={app.id}
       href={app.url}
       target="_blank"
       className="gap-y-1 text-slate-50 flex flex-col"
     >
       <AppIcon iconUrl={app.iconUrl!} name={app.name!} />
 
-      <Div className="gap-y-1 flex flex-col relative">
-        <Div className="flex items-center mt-2">
-          <Div className="flex items-center mt-2 gap-2 bg-slate-600/40 backdrop-blur rounded-full p-2 px-4">
+      <div className="gap-y-1 flex flex-col relative">
+        <div className="flex items-center mt-2">
+          <div className="flex items-center mt-2 gap-2 bg-slate-600/40 backdrop-blur rounded-full p-2 px-4">
             {frameworks.expoSdk && (
               <ExpoIcon
                 fill="white"
@@ -32,15 +28,15 @@ export function AppButton({ app }: { app: Partial<AppItem> }) {
             )}
             {frameworks.reactNavigation && (
               <ReactNavigationIcon
-                stroke="white"
+                fill="white"
                 style={{ width: iconSize, height: iconSize }}
               />
             )}
-          </Div>
-        </Div>
-        <H3 className="line-clamp-2	font-normal text-lg">{altSafe(app.name)}</H3>
-        <Span className="line-clamp-2	text-sm text-gray-500">{app.author}</Span>
-      </Div>
-    </A>
+          </div>
+        </div>
+        <h3 className="line-clamp-2	font-normal text-lg">{altSafe(app.name)}</h3>
+        <span className="line-clamp-2	text-sm text-gray-500">{app.author}</span>
+      </div>
+    </a>
   );
 }
diff --git a/src/components/showcase/app-icon.tsx b/src/components/showcase/app-icon.tsx
@@ -1,23 +1,20 @@
 import styles from '@/styles/showcase.module.scss';
 
-const Div = 'div';
-const Img = 'img';
-
 const altSafe = (name: string) => name.replace('–', '-');
 export function AppIcon({ iconUrl, name }: { iconUrl: string; name: string }) {
   return (
-    <Div
+    <div
       className={
         'relative flex object-cover aspect-square ' + styles.appContainer
       }
     >
-      <Img
+      <img
         draggable={false}
         style={{ zIndex: 1 }}
         className={'object-cover flex-1 bg-slate-800 ' + styles.appIcon}
         src={iconUrl}
         alt={`${altSafe(name)} icon`}
       />
-    </Div>
+    </div>
   );
 }
diff --git a/src/components/showcase/icons.tsx b/src/components/showcase/icons.tsx
diff --git a/src/components/showcase/row.tsx b/src/components/showcase/row.tsx
@@ -1,10 +1,9 @@
 import { AppItem } from '@/data/getAppStoreData';
 import React from 'react';
-import { FlatList, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 
 import { AppButton } from './app-button';
 
-const Div = 'div';
 const Row = ({ title, apps }: { title: string; apps: AppItem[] }) => {
   return (
     <FlatList
@@ -19,9 +18,9 @@ const Row = ({ title, apps }: { title: string; apps: AppItem[] }) => {
       showsHorizontalScrollIndicator={false}
       data={apps}
       renderItem={({ item, index }) => (
-        <Div key={index} className="w-[8rem] md:w-[12rem] aspect-square">
+        <div key={index} className="w-[8rem] md:w-[12rem] aspect-square">
           <AppButton app={item} />
-        </Div>
+        </div>
       )}
     />
   );