prettier fixes

ganesshkumar · Dec 28, 2024 · d0d18d7 · d0d18d7
1 parent 2dd9876
commit d0d18d7
Show file tree

Hide file tree

Showing 32 changed files with 1,279 additions and 727 deletions.
diff --git a/components/AllPluinsList.tsx b/components/AllPluinsList.tsx
@@ -5,7 +5,20 @@ import { memo } from 'react';
 import { VList } from 'virtua';
 import { getDescription } from '../utils/plugins';
 
-const AllPluginsList = ({ plugins, favorites, setFavorites }) => {
+const highlightMatch = (name, query) => {
+  const parts = name.split(new RegExp(`(${query})`, 'gi'));
+  return parts.map((part, index) =>
+    part.toLowerCase() === query.toLowerCase() ? (
+      <span key={index} style={{ backgroundColor: 'yellow' }}>
+        {part}
+      </span>
+    ) : (
+      part
+    )
+  );
+};
+
+const AllPluginsList = ({ plugins, favorites, setFavorites, highlight }) => {
   return (
     <div className="flex-col stripped grow">
       <VList style={{ height: '100%' }}>
@@ -16,6 +29,7 @@ const AllPluginsList = ({ plugins, favorites, setFavorites }) => {
             index={index}
             favorites={favorites}
             setFavorites={setFavorites}
+            highlight={highlight}
           />
         ))}
       </VList>
@@ -24,7 +38,7 @@ const AllPluginsList = ({ plugins, favorites, setFavorites }) => {
 };
 
 const UnindexedPlugin = (props) => {
-  const { plugin, favorites, setFavorites, index } = props;
+  const { plugin, favorites, setFavorites, index, highlight } = props;
   return (
     <div
       key={plugin.pluginId}
@@ -34,7 +48,7 @@ const UnindexedPlugin = (props) => {
         href={`/plugins/${plugin.pluginId}`}
         className="text-xl font-semibold text-violet-800"
       >
-        {plugin.name}
+        {highlight ? highlightMatch(plugin.name, highlight) : plugin.name}
       </Link>
       <div className="flex items-center space-x-2 text-sm text-gray-500">
         by&nbsp;<span className="text-gray-700">{plugin.author}</span>
@@ -44,7 +58,11 @@ const UnindexedPlugin = (props) => {
           setFavorites={setFavorites}
         />
       </div>
-      <div className="my-4">{getDescription(plugin)}</div>
+      <div className="my-4">
+        {highlight
+          ? highlightMatch(getDescription(plugin), highlight)
+          : getDescription(plugin)}
+      </div>
       <Link
         href={`/plugins/${plugin.pluginId}`}
         className="underline text-gray-600 font-seminbold"

diff --git a/components/Divider.tsx b/components/Divider.tsx
@@ -1,9 +1,9 @@
-import { HR } from "flowbite-react";
+import { HR } from 'flowbite-react';
 
 const Divider = () => (
   <div className="max-w-6xl mx-auto my-4">
     <HR.Trimmed />
   </div>
 );
 
-export default Divider;
+export default Divider;
diff --git a/components/FavPluginUpdates.tsx b/components/FavPluginUpdates.tsx
@@ -23,12 +23,12 @@ const FavPluginUpdates = (props) => {
   return (
     <>
       {/* Helper to add favorite plugins */}
-      {favorites && favorites.length == 0 &&
+      {favorites && favorites.length == 0 && (
         <>
           <NoFavPlugins />
           <Divider />
         </>
-      }
+      )}
 
       {/* Updates for your favorite plugins */}
       {/* {updatesForFavPlugins && updatesForFavPlugins.length > 0 && (

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -38,14 +38,20 @@ const AppFooter = () => {
                 <Footer.Link className={footerLinkClass} href="/updates">
                   Latest Updates
                 </Footer.Link>
-                <Footer.Link className={footerLinkClass} href="/most-downloaded">
-                  Most Downloaded
+                <Footer.Link className={footerLinkClass} href="/favorites">
+                  Favorite Plugins
                 </Footer.Link>
-                <Footer.Link className={footerLinkClass} href="/tags">
-                  Tags
+                <Footer.Link
+                  className={footerLinkClass}
+                  href="/most-downloaded"
+                >
+                  Most Downloaded
                 </Footer.Link>
                 <Footer.Link className={footerLinkClass} href="/trending">
-                  Trending
+                  Trending Plugins
+                </Footer.Link>
+                <Footer.Link className={footerLinkClass} href="/tags">
+                  Plugin Tags
                 </Footer.Link>
               </Footer.LinkGroup>
             </div>
@@ -62,7 +68,11 @@ const AppFooter = () => {
         <Footer.Divider className="border-gray-300" />
         <div className="w-full items-center justify-between">
           <div className="text-sm text-gray-900 text-center">
-            © 2022-{new Date().getFullYear()} <a href="/" className="hover:underline">Obsidian Plugin Stats</a>. All rights reserved.
+            © 2022-{new Date().getFullYear()}{' '}
+            <a href="/" className="hover:underline">
+              Obsidian Plugin Stats
+            </a>
+            . All rights reserved.
           </div>
           <div className="my-2 text-sm  dark:text-gray-400 text-center">
             Made with 💜 by{' '}

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -75,7 +75,8 @@ const Header = (props) => {
   return (
     <Head>
       <title>
-        Obsidian Plugin Stats - Explore New, Updated, Trending and Most Downloaded Obsidian Plugins
+        Obsidian Plugin Stats - Explore New, Updated, Trending and Most
+        Downloaded Obsidian Plugins
       </title>
       <link rel="icon" href="/favicon-64.png" />
       <meta

diff --git a/components/InfoBar.tsx b/components/InfoBar.tsx
@@ -1,7 +1,7 @@
 interface IInfoBarProps {
   title: string;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-};
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
 
 const Content = ({ title }) => (
   <>
@@ -26,24 +26,49 @@ const Content = ({ title }) => (
   </>
 );
 
-const className = "group relative z-20 scroll-mt-20 text-3xl font-bold text-gray-800 dark:text-white capitalize my-4";
-const id = "default-table";
+const className =
+  'group relative z-20 scroll-mt-20 text-3xl font-bold text-gray-800 dark:text-white capitalize my-4';
+const id = 'default-table';
 
-const InfoBar = ({ title, as = "h1" }: IInfoBarProps) => {
+const InfoBar = ({ title, as = 'h1' }: IInfoBarProps) => {
   switch (as) {
-    case "h6":
-      return <h6 id={id} className={className}><Content title={title} /></h6>;
-    case "h5":
-      return <h5 id={id} className={className}><Content title={title} /></h5>;
-    case "h4":
-      return <h4 id={id} className={className}><Content title={title} /></h4>;
-    case "h3":
-      return <h3 id={id} className={className}><Content title={title} /></h3>;
-    case "h2":
-      return <h2 id={id} className={className}><Content title={title} /></h2>;
-    case "h1":
+    case 'h6':
+      return (
+        <h6 id={id} className={className}>
+          <Content title={title} />
+        </h6>
+      );
+    case 'h5':
+      return (
+        <h5 id={id} className={className}>
+          <Content title={title} />
+        </h5>
+      );
+    case 'h4':
+      return (
+        <h4 id={id} className={className}>
+          <Content title={title} />
+        </h4>
+      );
+    case 'h3':
+      return (
+        <h3 id={id} className={className}>
+          <Content title={title} />
+        </h3>
+      );
+    case 'h2':
+      return (
+        <h2 id={id} className={className}>
+          <Content title={title} />
+        </h2>
+      );
+    case 'h1':
     default:
-      return <h1 id={id} className={className}><Content title={title} /></h1>;
+      return (
+        <h1 id={id} className={className}>
+          <Content title={title} />
+        </h1>
+      );
   }
 };