note

<div className="sticky top-[4rem] z-20 bg-silver dark:bg-black w-screen">
  <div className="flex flex-col-reverse items-center justify-between lg:flex-row px-8">
    <div className="mb-1 flex space-x-1 lg:mb-4 lg:space-x-4">
      <Button
        radius="none"
        onClick={() => setFilter("all")}
        className={`px-4 py-2 underline decoration-black decoration-4 ${
          filter === "all" ? "bg-gray-800 text-white" : "bg-gray-200"
        }`}
      >
        ALL
      </Button>
      <Button
        radius="none"
        onClick={() => setFilter("album")}
        className={`decoration-hallon px-4 py-2 underline decoration-4 ${
          filter === "album" ? "text-hallon bg-gray-800" : "bg-gray-200"
        }`}
      >
        ALBUMS
      </Button>
      <Button
        radius="none"
        onClick={() => setFilter("song")}
        className={`decoration-blue px-4 py-2 underline decoration-4 ${
          filter === "song" ? "text-blue bg-gray-800" : "bg-gray-200"
        }`}
      >
        SONGS
      </Button>
      <Button
        radius="none"
        onClick={() => setFilter("artist")}
        className={`decoration-orange px-4 py-2 underline decoration-4 ${
          filter === "artist" ? "text-orange bg-gray-800" : "bg-gray-200"
        }`}
      >
        ARTISTS
      </Button>
    </div>
    <div className="mb-1 flex flex-row gap-4 bg-black px-2 lg:mb-4 pr-8">
      <p className="text-[#79B473]">VERIFIED</p>
      <p className="text-[#F4442E]">PUBLIC</p>
    </div>
  </div>
</div>;