add quick search with inline results to the home page (#2317)

Author: Simek

components/CompatibilityTags.tsx

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 
-import { A } from '~/common/styleguide';
+import { A, useLayout } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
 import tw from '~/util/tailwind';
 
@@ -11,9 +11,12 @@ import Tooltip from './Tooltip';
 
 type Props = {
   library: LibraryType;
+  small?: boolean;
 };
 
-export default function CompatibilityTags({ library }: Props) {
+export default function CompatibilityTags({ library, small }: Props) {
+  const { isSmallScreen } = useLayout();
+
   const platforms = [
     library.android ? 'Android' : null,
     library.ios ? 'iOS' : null,
@@ -25,63 +28,67 @@ export default function CompatibilityTags({ library }: Props) {
   ].filter(Boolean);
 
   return (
-    <View style={tw`flex-row flex-wrap items-center gap-1.5`}>
+    <View style={tw`max-w-full flex-row flex-wrap items-center gap-1.5`}>
       {library.dev ? (
         <Tag
           label="Development Tool"
           tagStyle={tw`border-[#d9c8fa] bg-[#ece3fc] dark:border-[#3d2861] dark:bg-[#261a3d]`}
           icon={null}
+          small={small}
         />
       ) : null}
       {library.template ? (
         <Tag
           label="Template"
           tagStyle={tw`border-[#f5c6e8] bg-[#fce1f5] dark:border-[#52213e] dark:bg-[#37172e]`}
           icon={null}
+          small={small}
         />
       ) : null}
-      {!library.dev && !library.template && <NewArchitectureTag library={library} />}
+      {!library.dev && !library.template && <NewArchitectureTag library={library} small={small} />}
       {platforms.map(platform =>
         platform ? (
           <Tag
             label={platform}
             key={`${platform}-platform`}
             tagStyle={tw`border-palette-gray2 bg-palette-gray1 dark:border-default dark:bg-dark`}
+            small={small}
           />
         ) : null
       )}
-      {(library.expoGo ?? library.fireos ?? library.vegaos ?? library.horizon) && (
-        <Tooltip
-          side="bottom"
-          trigger={
-            <View
-              style={tw`cursor-pointer items-center justify-center rounded-full`}
-              role="button"
-              aria-label="Additional information">
-              <Info style={tw`text-icon`} />
-            </View>
-          }>
-          Additional information
-          <br />
-          <ul style={tw`m-0 pl-3.5`}>
-            {library.expoGo && <li>Works with Expo Go</li>}
-            {library.fireos && <li>Works with Fire OS</li>}
-            {library.horizon && <li>Works with Meta Horizon OS</li>}
-            {library.vegaos && typeof library.vegaos === 'boolean' && <li>Works with Vega OS</li>}
-            {library.vegaos && typeof library.vegaos === 'string' && (
-              <li>
-                Works with Vega OS
-                <br />
-                <A
-                  href={`https://www.npmjs.com/package/${library.vegaos}`}
-                  style={tw`text-xs font-light text-white`}>
-                  (via dedicated support package)
-                </A>
-              </li>
-            )}
-          </ul>
-        </Tooltip>
-      )}
+      {!(small && isSmallScreen) &&
+        (library.expoGo ?? library.fireos ?? library.vegaos ?? library.horizon) && (
+          <Tooltip
+            side="bottom"
+            trigger={
+              <View
+                style={tw`cursor-pointer items-center justify-center rounded-full`}
+                role="button"
+                aria-label="Additional information">
+                <Info style={tw`text-icon`} />
+              </View>
+            }>
+            Additional information
+            <br />
+            <ul style={tw`m-0 pl-3.5`}>
+              {library.expoGo && <li>Works with Expo Go</li>}
+              {library.fireos && <li>Works with Fire OS</li>}
+              {library.horizon && <li>Works with Meta Horizon OS</li>}
+              {library.vegaos && typeof library.vegaos === 'boolean' && <li>Works with Vega OS</li>}
+              {library.vegaos && typeof library.vegaos === 'string' && (
+                <li>
+                  Works with Vega OS
+                  <br />
+                  <A
+                    href={`https://www.npmjs.com/package/${library.vegaos}`}
+                    style={tw`text-xs font-light text-white`}>
+                    (via dedicated support package)
+                  </A>
+                </li>
+              )}
+            </ul>
+          </Tooltip>
+        )}
     </View>
   );
 }

components/Icons/index.tsx

@@ -1251,23 +1251,118 @@ export function FundingGitHub({ width = 24, height = 24, style }: IconProps) {
 export function RSS({ width = 24, height = 24, style }: IconProps) {
   return (
     <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
-      <path
+      <Path
         d="M64,40A152,152,0,0,1,216,192"
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="24"
       />
-      <path
+      <Path
         d="M64,112a80,80,0,0,1,80,80"
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="20"
       />
-      <circle cx="68" cy="188" r="12" fill="currentColor" />
+      <Circle cx="68" cy="188" r="12" fill="currentColor" />
+    </Svg>
+  );
+}
+
+export function Spinner({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style} id="spinner">
+      <Line
+        x1="128"
+        y1="32"
+        x2="128"
+        y2="64"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="195.88"
+        y1="60.12"
+        x2="173.25"
+        y2="82.75"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="224"
+        y1="128"
+        x2="192"
+        y2="128"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="195.88"
+        y1="195.88"
+        x2="173.25"
+        y2="173.25"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="128"
+        y1="224"
+        x2="128"
+        y2="192"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="60.12"
+        y1="195.88"
+        x2="82.75"
+        y2="173.25"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="32"
+        y1="128"
+        x2="64"
+        y2="128"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Line
+        x1="60.12"
+        y1="60.12"
+        x2="82.75"
+        y2="82.75"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
     </Svg>
   );
 }

components/Library/LibraryDescription.tsx

@@ -1,5 +1,7 @@
 import * as emoji from 'node-emoji';
 import { Linkify } from 'react-easy-linkify';
+import { type StyleProp } from 'react-native';
+import { type Style } from 'twrnc';
 
 import { A, Caption, Headline } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
@@ -8,11 +10,12 @@ import tw from '~/util/tailwind';
 type Props = {
   github: LibraryType['github'];
   maxLines?: number;
+  style?: StyleProp<Style>;
 };
 
-export default function LibraryDescription({ github, maxLines }: Props) {
+export default function LibraryDescription({ github, maxLines, style }: Props) {
   return github.description && github.description.length > 0 ? (
-    <Headline numberOfLines={maxLines} style={tw`text-base font-light leading-snug`}>
+    <Headline numberOfLines={maxLines} style={[tw`text-base font-light leading-snug`, style]}>
       <Linkify
         options={{
           linkWrapper: ({ children, ...rest }) => <A {...rest}>{children}</A>,
@@ -21,7 +24,8 @@ export default function LibraryDescription({ github, maxLines }: Props) {
       </Linkify>
     </Headline>
   ) : (
-    <Caption style={tw`text-base font-light leading-snug text-palette-gray4 dark:text-secondary`}>
+    <Caption
+      style={[tw`text-base font-light leading-snug text-palette-gray4 dark:text-secondary`, style]}>
       The package does not have a description defined.
     </Caption>
   );

components/Library/NewArchitectureTag.tsx

@@ -11,9 +11,10 @@ import tw from '~/util/tailwind';
 
 type Props = {
   library: LibraryType;
+  small?: boolean;
 };
 
-export function NewArchitectureTag({ library }: Props) {
+export function NewArchitectureTag({ library, small = false }: Props) {
   const status = getNewArchSupportStatus(library);
   const icon = getTagIcon(status);
 
@@ -38,6 +39,7 @@ export function NewArchitectureTag({ library }: Props) {
     <View>
       <Tooltip
         side="bottom"
+        sideOffset={small ? 0 : undefined}
         trigger={
           <View>
             <A href="https://reactnative.dev/architecture/overview">
@@ -49,6 +51,7 @@ export function NewArchitectureTag({ library }: Props) {
                 }
                 icon={icon}
                 tagStyle={getTagColor(status)}
+                small={small}
               />
             </A>
           </View>
@@ -70,7 +73,7 @@ function getTagColor(status: NewArchSupportStatus) {
   switch (status) {
     case NewArchSupportStatus.NewArchOnly:
     case NewArchSupportStatus.Supported:
-      return tw`border-[#d4ebfa] bg-[#edf6fc] dark:border-[#203b4d] dark:bg-[#142733]`;
+      return tw`border-[#c3e3f7] bg-[#edf6fc] dark:border-[#203b4d] dark:bg-[#142733]`;
     case NewArchSupportStatus.Unsupported:
       return tw`border-[#faebaf] bg-[#fffae8] dark:border-[#3d3206] dark:bg-[#292005]`;
     default:

components/Navigation.tsx

@@ -30,15 +30,17 @@ export default function Navigation({
       {header ?? (
         <View
           style={[
-            tw`overflow-hidden bg-palette-gray6 py-10 dark:bg-dark`,
+            tw`relative z-10 bg-palette-gray6 py-10 dark:bg-dark`,
             isSmallScreen && tw`py-6`,
             style,
           ]}>
-          <Logo
-            width={580}
-            height={520}
-            style={tw`absolute left-1/2 top-[-76px] ml-[-280px] text-palette-gray5 opacity-15 dark:text-palette-gray7`}
-          />
+          <View style={tw`absolute inset-0 overflow-hidden`}>
+            <Logo
+              width={580}
+              height={520}
+              style={tw`absolute left-1/2 top-[-76px] ml-[-280px] text-palette-gray5 opacity-15 dark:text-palette-gray7`}
+            />
+          </View>
           <H1
             style={[
               tw`px-5 text-center text-[42px] leading-[54px] text-white`,