style: apply biome check

src/app/explorer/page.tsx

@@ -1,37 +1,37 @@
 "use client"
 
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
+import { GuildInfiniteScroll } from "@/components/GuildInfiniteScroll"
+import { GuildSearchBar } from "@/components/GuildSeachBar"
+import { Layout } from "@/components/Layout"
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { YourGuilds } from "@/components/YourGuilds"
+import { Anchor } from "@/components/ui/Anchor"
 import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
 import { Plus } from "@phosphor-icons/react"
+import { SignIn } from "@phosphor-icons/react"
 import useIsStuck from "hooks/useIsStuck"
-import { Suspense, useEffect } from "react"
 import useScrollspy from "hooks/useScrollSpy"
-import { GuildInfiniteScroll } from "@/components/GuildInfiniteScroll"
-import { GuildSearchBar } from "@/components/GuildSeachBar"
-import { ActiveSection } from "./types"
-import { Anchor } from "@/components/ui/Anchor"
-import { Layout } from "@/components/Layout"
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { Suspense, useEffect } from "react"
+import Robot from "/public/landing/robot.svg"
 import {
-  isNavStuckAtom,
-  isSeachStuckAtom,
   activeSectionAtom,
   guildQueryAtom,
+  isNavStuckAtom,
+  isSeachStuckAtom,
 } from "./atoms"
-import { useAtom, useAtomValue, useSetAtom } from "jotai"
-import { YourGuilds } from "@/components/YourGuilds"
-import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { SignIn } from "@phosphor-icons/react"
-import Robot from "/public/landing/robot.svg"
-import { Card } from "@/components/ui/Card"
-import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { ActiveSection } from "./types"
 
 const HeaderBackground = () => {
   const isNavStuck = useAtomValue(isNavStuckAtom)
   const isSearchStuck = useAtomValue(isSeachStuckAtom)
 
   return (
     <div
-      className="fixed inset-x-0 top-0 z-10 h-40 -translate-y-40 border-b border-border bg-gradient-to-b from-background to-card/30 backdrop-blur backdrop-saturate-150 duration-75 data-[nav-stuck='true']:-translate-y-24 data-[nav-stuck='true']:data-[search-stuck='true']:translate-y-0 motion-safe:transition-transform sm:h-28 sm:-translate-y-28 sm:data-[nav-stuck='true']:-translate-y-12"
+      className="-translate-y-40 data-[nav-stuck='true']:-translate-y-24 sm:-translate-y-28 sm:data-[nav-stuck='true']:-translate-y-12 fixed inset-x-0 top-0 z-10 h-40 border-border border-b bg-gradient-to-b from-background to-card/30 backdrop-blur backdrop-saturate-150 duration-75 data-[nav-stuck='true']:data-[search-stuck='true']:translate-y-0 motion-safe:transition-transform sm:h-28"
       data-nav-stuck={isNavStuck}
       data-search-stuck={isSearchStuck}
     />
@@ -115,7 +115,7 @@ const Page = () => {
             </Card>
           )}
           <section id={ActiveSection.ExploreGuilds}>
-            <h2 className="text-lg font-bold tracking-tight">
+            <h2 className="font-bold text-lg tracking-tight">
               Explore verified guilds
             </h2>
             <div className="sticky top-10 z-10" ref={searchRef}>
@@ -127,7 +127,7 @@ const Page = () => {
           </section>
         </Layout.Main>
         <Layout.Footer>
-          <p className="my-8 text-center text-sm text-muted-foreground">
+          <p className="my-8 text-center text-muted-foreground text-sm">
             This website is{" "}
             <Anchor
               href="https://github.com/guildxyz/guild.xyz"

src/app/explorer/types.ts

@@ -2,4 +2,3 @@ export enum ActiveSection {
   YourGuilds = "your-guilds",
   ExploreGuilds = "explore-guilds",
 }
-

src/components/common/Layout/Layout.tsx

@@ -2,10 +2,10 @@ import {
   Box,
   BoxProps,
   Container,
-  Heading,
   HStack,
-  useColorMode,
+  Heading,
   VStack,
+  useColorMode,
 } from "@chakra-ui/react"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect"

src/components/common/Layout/components/Account/components/AccountButton.tsx

@@ -1,6 +1,6 @@
 import { ButtonProps } from "@chakra-ui/react"
 import Button from "components/common/Button"
-import { forwardRef, PropsWithChildren } from "react"
+import { PropsWithChildren, forwardRef } from "react"
 
 const AccountButton = forwardRef(
   ({ children, ...rest }: PropsWithChildren<ButtonProps>, ref: any): JSX.Element => (

src/components/common/Layout/components/NavMenu/components/NavButton.tsx

@@ -2,7 +2,7 @@ import { ButtonProps } from "@chakra-ui/react"
 import Button from "components/common/Button"
 import NextLink from "next/link"
 import { useRouter } from "next/router"
-import { forwardRef, PropsWithChildren, Ref } from "react"
+import { PropsWithChildren, Ref, forwardRef } from "react"
 import { Rest } from "types"
 
 const NavButton = forwardRef(

src/components/common/Layout/index.tsx

@@ -1,3 +1,4 @@
+import LegacyLayout from "./Layout"
 import BackButton from "./components/BackButton"
 import Background from "./components/Background"
 import Footer from "./components/Footer"
@@ -7,7 +8,6 @@ import HeaderSection from "./components/HeaderSection"
 import Headline from "./components/Headline"
 import MainSection from "./components/MainSection"
 import Root from "./components/Root"
-import LegacyLayout from "./Layout"
 
 export default LegacyLayout
 

src/v2/components/GuildCard.tsx

@@ -1,18 +1,18 @@
-import { Users, CircleWavyCheck } from "@phosphor-icons/react"
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/Avatar"
-import { Badge } from "./ui/Badge"
+import { CircleWavyCheck, Users } from "@phosphor-icons/react"
+import Image from "next/image"
 import { GuildBase } from "types"
 import pluralize from "utils/pluralize"
+import { Anchor } from "./ui/Anchor"
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/Avatar"
+import { Badge } from "./ui/Badge"
+import { Card } from "./ui/Card"
+import { Skeleton } from "./ui/Skeleton"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "./ui/Tooltip"
-import { Skeleton } from "./ui/Skeleton"
-import { Card } from "./ui/Card"
-import Image from "next/image"
-import { Anchor } from "./ui/Anchor"
 
 type Props = {
   guildData: GuildBase
@@ -29,14 +29,14 @@ export const GuildCard: React.FC<Props> = ({ guildData }) => (
       </AvatarFallback>
     </Avatar>
     <div className="flex items-center">
-      <h3 className="max-w-36 truncate font-display text-lg font-bold tracking-tight text-foreground">
+      <h3 className="max-w-36 truncate font-bold font-display text-foreground text-lg tracking-tight">
         {guildData.name}
       </h3>
       {guildData.tags.includes("VERIFIED") && (
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger
-              className="relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring p-1"
+              className="relative rounded-full p-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
               aria-label="verified"
             >
               <div

src/v2/components/GuildInfiniteScroll.tsx

@@ -1,14 +1,14 @@
-import { GuildCardSkeleton, GuildCardWithLink } from "./GuildCard"
-import { PrimitiveAtom, useAtomValue } from "jotai"
-import { env } from "env"
+import { Spinner } from "@phosphor-icons/react"
 import useUser from "components/[guild]/hooks/useUser"
+import { env } from "env"
+import { useScrollBatchedRendering } from "hooks/useScrollBatchedRendering"
+import { PrimitiveAtom, useAtomValue } from "jotai"
 import { memo, useRef } from "react"
+import { SWRConfiguration } from "swr"
 import useSWRInfinite from "swr/infinite"
 import { GuildBase } from "types"
 import { fetcherWithSign } from "utils/fetcher"
-import { useScrollBatchedRendering } from "hooks/useScrollBatchedRendering"
-import { Spinner } from "@phosphor-icons/react"
-import { SWRConfiguration } from "swr"
+import { GuildCardSkeleton, GuildCardWithLink } from "./GuildCard"
 
 const BATCH_SIZE = 24
 

src/v2/components/GuildSeachBar.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
-import { Input } from "./ui/Input"
-import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup"
-import { PrimitiveAtom, useSetAtom } from "jotai"
-import React, { useEffect, useState } from "react"
-import { useSearchParams, usePathname } from "next/navigation"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
+import { PrimitiveAtom, useSetAtom } from "jotai"
+import { usePathname, useSearchParams } from "next/navigation"
+import React, { useEffect, useState } from "react"
+import { Input } from "./ui/Input"
+import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup"
 
 enum Order {
   Featured = "FEATURED",
@@ -46,7 +46,7 @@ export const GuildSearchBar = ({
   return (
     <div className="relative flex flex-col gap-3 py-4 sm:flex-row sm:gap-0">
       <Input
-        className="text-md relative h-12 grow rounded-xl border pl-10 pr-6 sm:rounded-r-none"
+        className="relative h-12 grow rounded-xl border pr-6 pl-10 text-md sm:rounded-r-none"
         placeholder="Search verified guilds"
         onChange={({ currentTarget }) => setSearch(currentTarget.value)}
         value={search}

src/v2/components/Layout/Layout.tsx

@@ -1,7 +1,7 @@
+import { Header as NavHeader } from "@/components/Header"
+import { PageBoundary } from "@/components/PageBoundary"
 import { ReactNode } from "react"
 import { PropsWithChildren } from "react"
-import { PageBoundary } from "@/components/PageBoundary"
-import { Header as NavHeader } from "@/components/Header"
 
 /* -------------------------------------------------------------------------------------------------
  * Root
@@ -32,7 +32,7 @@ interface HeadlineProps {
 
 const Headline = ({ title }: HeadlineProps) => (
   <PageBoundary>
-    <h1 className="pb-14 pt-9 font-display text-4xl font-bold tracking-tight text-white sm:text-5xl">
+    <h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
       {title}
     </h1>
   </PageBoundary>
@@ -43,10 +43,10 @@ const Headline = ({ title }: HeadlineProps) => (
  * -----------------------------------------------------------------------------------------------*/
 
 const Banner = () => (
-  <div className="absolute inset-0 -bottom-28 -z-10 overflow-hidden">
+  <div className="-bottom-28 -z-10 absolute inset-0 overflow-hidden">
     <div className="absolute inset-0 bg-[hsl(240deg_4%_16%)]" />
-    <div className="absolute inset-0 bg-[url('/banner.png')] bg-[auto_115%] bg-[right_top_10px] bg-no-repeat opacity-10" />
-    <div className="absolute inset-0 bg-gradient-to-tr from-[hsl(240deg_2.65%_22.16%)] from-50% to-transparent" />
+    <div className="absolute inset-0 bg-[auto_115%] bg-[right_top_10px] bg-[url('/banner.png')] bg-no-repeat opacity-10" />
+    <div className="absolute inset-0 bg-gradient-to-tr from-50% from-[hsl(240deg_2.65%_22.16%)] to-transparent" />
   </div>
 )
 

src/v2/components/Layout/index.ts

@@ -1,3 +1,3 @@
-import { Root, Headline, Banner, Header, Footer, Main } from "./Layout"
+import { Banner, Footer, Header, Headline, Main, Root } from "./Layout"
 
 export const Layout = { Root, Headline, Banner, Header, Footer, Main }

src/v2/components/YourGuilds.tsx

@@ -15,14 +15,13 @@ const useYourGuilds = () =>
 export const YourGuilds = () => {
   const { data: usersGuilds, isLoading: isGuildsLoading } = useYourGuilds()
 
-
   return (
-    <section className="mb-16 mt-1 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <section className="mt-1 mb-16 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
       {isGuildsLoading || !usersGuilds
         ? Array.from({ length: 6 }, (_, i) => <GuildCardSkeleton key={i} />)
         : usersGuilds.map((guild) => (
-          <GuildCardWithLink guildData={guild} key={guild.id} />
-        ))}
+            <GuildCardWithLink guildData={guild} key={guild.id} />
+          ))}
     </section>
   )
 }

src/v2/components/ui/Avatar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 

src/v2/components/ui/Separator.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"