migrate colored badges and bottom navigation to ts

Author: medyo

src/App.js

@@ -3,7 +3,7 @@ import './App.css'
 import { Footer } from 'src/components/Layout'
 import Header from 'src/components/Header'
 import { BookmarksSidebar } from 'src/features/bookmarks'
-import { MarketingBanner } from 'src/components/Elements/MarketingBanner'
+import { MarketingBanner } from 'src/components/Elements'
 import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'

src/components/AppContentLayout.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
-import BottomNavigation from './BottomNavigation'
+import { BottomNavigation } from './Elements/'
 import { isDesktop } from 'react-device-detect'
 import { useUserPreferences } from 'src/stores/preferences'
 

src/components/ColoredLanguagesBadge.js

@@ -1,9 +1,19 @@
-import React from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
+import { SelectedCard } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AiOutlineMenu } from 'react-icons/ai'
 
-function BottomNavigation({ selectedCard, setSelectedCard, setShowSettings }) {
+type BottomNavigationProps = {
+  selectedCard: SelectedCard
+  setSelectedCard: (card: SelectedCard) => void
+  setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
+}
+
+export const BottomNavigation = ({
+  selectedCard,
+  setSelectedCard,
+  setShowSettings,
+}: BottomNavigationProps) => {
   const { cards } = useUserPreferences()
 
   return (
@@ -18,20 +28,18 @@ function BottomNavigation({ selectedCard, setSelectedCard, setShowSettings }) {
             }
             href="/#"
             onClick={(e) => setSelectedCard(card)}>
-            {constantCard.icon}
+            {constantCard?.icon}
           </a>
         )
       })}
       {
         <a
           className={'navigationItem '}
           href="/#"
-          onClick={(e) => setShowSettings((prev) => !prev)}>
+          onClick={(e) => setShowSettings((prev: boolean) => !prev)}>
           {<AiOutlineMenu />}
         </a>
       }
     </div>
   )
 }
-
-export default BottomNavigation

src/components/BottomNavigation.js …ts/BottomNavigation/BottomNavigation.tsxsrc/components/BottomNavigation.js renamed to src/components/Elements/BottomNavigation/BottomNavigation.tsx src/components/BottomNavigation.js renamed to src/components/Elements/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1 @@
+export * from "./BottomNavigation"

src/components/Elements/BottomNavigation/index.ts

@@ -0,0 +1,16 @@
+export const ColoredLanguageItem = ({ language }: { language: string }) => {
+  return (
+    <span className={`rowItem rowLanguage gh-language-${language.toLowerCase()}`}>{language}</span>
+  )
+}
+export const ColoredLanguagesBadge = ({ languages }: { languages: string[] }) => {
+  return (
+    <>
+      {languages &&
+        languages.map(
+          (language, index) =>
+            language && <ColoredLanguageItem language={language} key={`cl-${language}-${index}`} />
+        )}
+    </>
+  )
+}

src/components/Elements/ColoredLanguagesBadges/ColoredLanguagesBadge.tsx

@@ -0,0 +1 @@
+export * from "./ColoredLanguagesBadge"

src/components/Elements/ColoredLanguagesBadges/index.ts

@@ -0,0 +1,6 @@
+export * from "./ColoredLanguagesBadges"
+export * from "./Card"
+export * from "./MarketingBanner"
+export * from "./SearchBar"
+export * from "./UserTags"
+export * from "./BottomNavigation"

src/components/Elements/index.ts

@@ -1,9 +1,18 @@
 import { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
-import { ListComponentPropsType } from './types'
 import { CarbonAd } from 'src/features/carbonAds'
 import { BaseEntry } from 'src/types'
 
+export type ListComponentPropsType<T extends BaseEntry> = {
+  items: T[]
+  isLoading: boolean
+  renderItem: (item: T, index: number) => React.ReactNode
+  withAds: boolean
+  placeholder?: React.ReactNode
+  refresh?: boolean
+  error?: any
+}
+
 export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType<T>) {
   const { items, isLoading, error, renderItem, withAds, placeholder = <Placeholder /> } = props