openstatus.dev / openstatus
Openstatus www.openstatus.dev
fork atom

feat: gauge animation (#1054)

authored by

Maximilian Kaske and committed by
GitHub 665bd08a 5a1249ff

+13 -11
+10 -9
apps/web/src/app/play/checker/_components/checker-form.tsx
··· 50 50 import { toast } from "@/lib/toast"; 51 51 import { notEmpty } from "@/lib/utils"; 52 52 import { flyRegions } from "@openstatus/db/src/schema/constants"; 53 - import { 54 - ArrowRight, 55 - ChevronRight, 56 - FileSearch, 57 - Info, 58 - Loader, 59 - } from "lucide-react"; 53 + import { ArrowRight, ChevronRight, Gauge, Info, Loader } from "lucide-react"; 60 54 import dynamic from "next/dynamic"; 61 55 import Link from "next/link"; 62 56 import { useQueryStates } from "nuqs"; ··· 259 253 )} 260 254 /> 261 255 <div className="col-span-full mt-2 sm:col-span-1"> 262 - <Button disabled={isPending} className="h-10 w-full"> 263 - {isPending ? <LoadingAnimation /> : "Check"} 256 + <Button disabled={isPending} className="h-10 w-full group"> 257 + {isPending ? ( 258 + <LoadingAnimation /> 259 + ) : ( 260 + <> 261 + Check{" "} 262 + <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" /> 263 + </> 264 + )} 264 265 </Button> 265 266 </div> 266 267 </div>
+3 -2
apps/web/src/components/marketing/speed-checker-button.tsx
··· 5 5 6 6 export function SpeedCheckerButton({ className, ...props }: ButtonProps) { 7 7 return ( 8 - <Button className={cn("rounded-full", className)} asChild {...props}> 8 + <Button className={cn("rounded-full group", className)} asChild {...props}> 9 9 <Link href="/play/checker"> 10 - Speed Checker <Icons.gauge className="ml-1 h-4 w-4" /> 10 + Speed Checker{" "} 11 + <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" /> 11 12 </Link> 12 13 </Button> 13 14 );