feat: add TopBar component with Bar and AppBar exports; refactor Txt component for skeleton support

Author: codeAbinash

src/components/Text.tsx

@@ -1,5 +1,6 @@
 import { Medium } from '@utils/fonts'
-import type { TextProps } from 'react-native'
+import { useMemo } from 'react'
+import { View, type TextProps } from 'react-native'
 
 export function TxtAcc({ children, size, style, ...rest }: TextProps & { size?: number }) {
   return (
@@ -9,10 +10,21 @@ export function TxtAcc({ children, size, style, ...rest }: TextProps & { size?:
   )
 }
 
-export function Txt({ children, size, style, ...rest }: TextProps & { size?: number }) {
+type TxtProps = TextProps & {
+  size?: number
+  skeleton?: boolean | string | number | object | undefined | null
+}
+
+export function Txt({ children, size, style, skeleton = true, ...rest }: TxtProps) {
+  if (skeleton === undefined) return <TxtSkeleton />
   return (
     <Medium className='text-zinc-500' style={[{ fontSize: size || 11.5 }, style]} {...rest}>
       {children}
     </Medium>
   )
 }
+
+export function TxtSkeleton() {
+  const width = useMemo(() => Math.random() * 50 + 30, [])
+  return <View className='rounded-md bg-zinc-200 dark:bg-zinc-800' style={{ height: 16, width: width }} />
+}

src/components/TopBar.tsx

@@ -0,0 +1,11 @@
+import { View } from 'react-native'
+
+export const Bar = () => (
+  <View className='mx-auto h-1.5 w-28 justify-between rounded-full bg-zinc-200 dark:bg-zinc-800' />
+)
+
+export const AppBar = () => (
+  <View className='pb-3.5 pt-4'>
+    <Bar />
+  </View>
+)