From 665bd08ace0cce11ace7c5a2bb72746a3baaf3a9 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:09:40 +0200
Subject: [PATCH] feat: gauge animation (#1054)

---
 .../play/checker/_components/checker-form.tsx | 19 ++++++++++---------
 .../marketing/speed-checker-button.tsx        |  5 +++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/play/checker/_components/checker-form.tsx b/apps/web/src/app/play/checker/_components/checker-form.tsx
index 55962504..396d8003 100644
--- a/apps/web/src/app/play/checker/_components/checker-form.tsx
+++ b/apps/web/src/app/play/checker/_components/checker-form.tsx
@@ -50,13 +50,7 @@ import {
 import { toast } from "@/lib/toast";
 import { notEmpty } from "@/lib/utils";
 import { flyRegions } from "@openstatus/db/src/schema/constants";
-import {
-  ArrowRight,
-  ChevronRight,
-  FileSearch,
-  Info,
-  Loader,
-} from "lucide-react";
+import { ArrowRight, ChevronRight, Gauge, Info, Loader } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useQueryStates } from "nuqs";
@@ -259,8 +253,15 @@ export function CheckerForm({ defaultValues, defaultData }: CheckerFormProps) {
               )}
             />
             <div className="col-span-full mt-2 sm:col-span-1">
-              <Button disabled={isPending} className="h-10 w-full">
-                {isPending ? <LoadingAnimation /> : "Check"}
+              <Button disabled={isPending} className="h-10 w-full group">
+                {isPending ? (
+                  <LoadingAnimation />
+                ) : (
+                  <>
+                    Check{" "}
+                    <Gauge className="ml-1 h-4 w-4 [&>*:first-child]:transition-transform [&>*:first-child]:origin-[12px_14px] [&>*:first-child]:-rotate-90 [&>*:first-child]:group-hover:rotate-0 [&>*:first-child]:duration-500 [&>*:first-child]:ease-out" />
+                  </>
+                )}
               </Button>
             </div>
           </div>
diff --git a/apps/web/src/components/marketing/speed-checker-button.tsx b/apps/web/src/components/marketing/speed-checker-button.tsx
index 7a9ae725..2af2ee7d 100644
--- a/apps/web/src/components/marketing/speed-checker-button.tsx
+++ b/apps/web/src/components/marketing/speed-checker-button.tsx
@@ -5,9 +5,10 @@ import { Icons } from "../icons";
 
 export function SpeedCheckerButton({ className, ...props }: ButtonProps) {
   return (
-    <Button className={cn("rounded-full", className)} asChild {...props}>
+    <Button className={cn("rounded-full group", className)} asChild {...props}>
       <Link href="/play/checker">
-        Speed Checker <Icons.gauge className="ml-1 h-4 w-4" />
+        Speed Checker{" "}
+        <Icons.gauge className="ml-1 h-4 w-4 [&>*:first-child]:transition-transform [&>*:first-child]:origin-[12px_14px] [&>*:first-child]:-rotate-90 [&>*:first-child]:group-hover:rotate-0 [&>*:first-child]:duration-500 [&>*:first-child]:ease-out" />
       </Link>
     </Button>
   );
-- 
2.51.2