Fix tools-review

nrwl · Dec 14, 2022 · ec8a375 · ec8a375
1 parent c73c0cf
commit ec8a375
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 58 deletions.
diff --git a/libs/website/ui-home/src/lib/monorepo-tools-logos.tsx b/libs/website/ui-home/src/lib/monorepo-tools-logos.tsx
@@ -27,24 +27,29 @@ const tools2: { name: string; link: string }[] = [
     name: 'Pants',
     link: 'https://github.com/pantsbuild/pants?utm_source=monorepo.tools',
   },
+  {
+    name: 'Please',
+    link: 'https://github.com/thought-machine/please?utm_source=monorepo.tools',
+  },
   {
     name: 'Rush',
     link: 'https://github.com/microsoft/rushstack?utm_source=monorepo.tools',
   },
+
+];
+
+const tools3: { name: string; link: string }[] = [
+  // Alphabetical order
   {
     name: 'Turborepo',
     link: 'https://github.com/vercel/turborepo?utm_source=monorepo.tools',
   },
-  {
-    name: 'Please',
-    link: 'https://github.com/thought-machine/please?utm_source=monorepo.tools',
-  },
 ];
 
 export function MonorepoToolsLogos() {
   return (
     <>
-      <div className="mt-8 grid  grid-cols-4 gap-0.5 pt-12 text-lg font-semibold lg:mt-16 lg:pt-16 lg:text-2xl">
+      <div className="mt-8 grid grid-cols-4 gap-0.5 pt-12 text-lg font-semibold lg:mt-16 lg:pt-16 lg:text-2xl">
         {tools1.map((tool) => (
           <a
             key={'tool-' + tool.name}
@@ -58,7 +63,7 @@ export function MonorepoToolsLogos() {
           </a>
         ))}
       </div>
-      <div className="mt-4 grid grid-cols-4 gap-0.5 pb-12 text-lg font-semibold lg:mb-16 lg:pb-16 lg:text-2xl">
+      <div className="mt-4 grid grid-cols-4 gap-0.5 text-lg font-semibold lg:text-2xl">
         {tools2.map((tool) => (
           <a
             key={'tool-' + tool.name}
@@ -72,6 +77,20 @@ export function MonorepoToolsLogos() {
           </a>
         ))}
       </div>
+      <div className="mt-4 grid grid-cols-4 gap-0.5 pb-12 text-lg font-semibold lg:mb-16 lg:pb-16 lg:text-2xl">
+        {tools3.map((tool) => (
+          <a
+            key={'tool-' + tool.name}
+            href={tool.link}
+            title={tool.name + ' on Github'}
+            rel="noreferrer"
+            target="_blank"
+            className="col-span-1 flex justify-center rounded bg-slate-100 py-8 px-8 transition hover:bg-yellow-500 hover:text-gray-800 dark:bg-slate-900 hover:dark:bg-yellow-500"
+          >
+            {tool.name}
+          </a>
+        ))}
+      </div>
     </>
   );
 }

diff --git a/libs/website/ui-home/src/lib/tools-review.tsx b/libs/website/ui-home/src/lib/tools-review.tsx
@@ -538,7 +538,7 @@ export function ToolsReview() {
                 aria-hidden="true"
                 className={classNames(
                   toolIndex === tools.length - 1 ? 'pl-2' : 'px-2',
-                  '-mt-px w-[10.75%]'
+                  '-mt-px w-[9.5%]'
                 )}
               >
                 <div className="border-t-2 border-transparent py-6">
@@ -572,28 +572,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
+              </div>
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
             </div>
@@ -634,7 +637,7 @@ export function ToolsReview() {
                           tierIdx === feature.features.length - 1
                             ? 'pl-2'
                             : 'px-2',
-                          'relative w-[10.75%] py-0 text-center'
+                          'relative w-[9.5%] py-0 text-center'
                         )}
                       >
                         <span className="relative h-full w-full py-3">
@@ -653,28 +656,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
+              </div>
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
             </div>
@@ -690,28 +696,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
+              </div>
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
             </div>
@@ -762,7 +771,7 @@ export function ToolsReview() {
                           tierIdx === feature.features.length - 1
                             ? 'pl-2'
                             : 'px-2',
-                          'relative w-[10.75%] py-0 text-center'
+                          'relative w-[9.5%] py-0 text-center'
                         )}
                       >
                         {valuesDictionary[tier.value]()}
@@ -779,28 +788,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
+              </div>
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
             </div>
@@ -816,28 +828,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow-md dark:bg-slate-700" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
+              </div>
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg bg-slate-100 shadow dark:bg-slate-700" />
               </div>
             </div>
@@ -878,7 +893,7 @@ export function ToolsReview() {
                           tierIdx === feature.features.length - 1
                             ? 'pl-2'
                             : 'px-2',
-                          'relative w-[10.75%] py-0 text-center'
+                          'relative w-[9.5%] py-0 text-center'
                         )}
                       >
                         {valuesDictionary[tier.value]()}
@@ -895,28 +910,31 @@ export function ToolsReview() {
               aria-hidden="true"
             >
               <div className="w-[14%] pr-4" />
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] px-2">
+              <div className="w-[9.5%] px-2">
                 <div className="h-full w-full rounded-lg ring-2 ring-black ring-opacity-5" />
               </div>
-              <div className="w-[10.75%] pl-2">
+              <div className="w-[9.5%] px-2">
+                <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
+              </div>
+              <div className="w-[9.5%] pl-2">
                 <div className="h-full w-full rounded-lg ring-1 ring-black ring-opacity-5" />
               </div>
             </div>