Skip to content

Commit 28ddfa1

Browse files
brookslybrandbrookslybrand
authored
Swap classnames for clsx (#212)
* Swap classnames for clsx * Adjust link on brand page
1 parent 462e947 commit 28ddfa1

File tree

12 files changed

+39
-36
lines changed

12 files changed

+39
-36
lines changed

‎app/components/color-scheme-toggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from "classnames";
1+
import { clsx } from "clsx";
22
import * as React from "react";
33
import { Form, useLocation } from "react-router";
44
import { useColorScheme } from "~/actions/color-scheme/components";
@@ -66,7 +66,7 @@ let ColorSchemeButton = React.forwardRef<
6666
{...props}
6767
ref={forwardedRef}
6868
disabled={colorScheme === props.value}
69-
className={classNames(
69+
className={clsx(
7070
"flex w-full items-center gap-4 px-4 py-1",
7171
colorScheme === props.value
7272
? "text-red-brand"

‎app/components/docs-header/docs-header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Link, useNavigate } from "react-router";
22
import iconsHref from "~/icons.svg";
33
import { ColorSchemeToggle } from "../color-scheme-toggle";
4-
import classNames from "classnames";
4+
import { clsx } from "clsx";
55
import { DocSearchButton } from "~/modules/docsearch";
66
import { VersionNav } from "../version-nav";
77

@@ -85,7 +85,7 @@ function HeaderSvgLink({
8585
return (
8686
<a
8787
href={href}
88-
className={classNames(
88+
className={clsx(
8989
`hidden text-gray-400 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50 md:block`,
9090
className,
9191
)}

‎app/components/docs-menu/menu-desktop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import classNames from "classnames";
1+
import { clsx } from "clsx";
22

33
export function NavMenuDesktop({ children }: { children: React.ReactNode }) {
44
return (
55
<div
6-
className={classNames(
6+
className={clsx(
77
"sticky bottom-0 top-16 hidden w-[--nav-width] flex-col gap-3 self-start overflow-auto py-6 pl-8 pr-6 lg:flex",
88
// Account for the height of the top nav
99
"h-[calc(100vh-var(--header-height))]",

‎app/components/docs-menu/menu.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22
import { Link, useSubmit } from "react-router";
3-
import classNames from "classnames";
3+
import { clsx } from "clsx";
44

55
import iconsHref from "~/icons.svg";
66

@@ -104,7 +104,7 @@ function MenuCategoryDetails({
104104

105105
return (
106106
<details
107-
className={classNames(className, "relative flex flex-col")}
107+
className={clsx(className, "relative flex flex-col")}
108108
open={isOpen}
109109
onToggle={(e) => {
110110
submitMenuCollapse(e.currentTarget.open);
@@ -163,7 +163,7 @@ function MenuSummary({ children }: { children: React.ReactNode }) {
163163

164164
return (
165165
<summary
166-
className={classNames(
166+
className={clsx(
167167
sharedClassName,
168168
"_no-triangle block cursor-pointer select-none",
169169
"outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100",
@@ -188,7 +188,7 @@ function HeaderMenuLink({
188188
<LinkWithSpinner
189189
to={to}
190190
className={(isActive) =>
191-
classNames(
191+
clsx(
192192
"relative -mx-4 flex items-center justify-between rounded-md px-4 py-3 font-bold",
193193
isActive
194194
? "bg-gray-50 font-semibold text-red-brand dark:bg-gray-800"
@@ -206,7 +206,7 @@ function MenuLink({ prefix, doc }: { prefix: string; doc: MenuDoc }) {
206206
<LinkWithSpinner
207207
to={prefix + doc.slug}
208208
className={(isActive) =>
209-
classNames(
209+
clsx(
210210
"relative -mx-2 flex items-center justify-between rounded-md py-1.5 pl-4 pr-3 lg:text-sm",
211211
isActive
212212
? "bg-gray-50 font-semibold text-red-brand dark:bg-gray-800"

‎app/components/on-this-page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Link } from "react-router";
22
import type { Doc } from "~/modules/gh-docs/.server";
33
import iconsHref from "~/icons.svg";
44
import { useEffect, useState } from "react";
5-
import classNames from "classnames";
5+
import { clsx } from "clsx";
66

77
export function LargeOnThisPage({
88
doc,
@@ -62,7 +62,7 @@ export function LargeOnThisPage({
6262
dangerouslySetInnerHTML={{
6363
__html: heading.html || "",
6464
}}
65-
className={classNames(
65+
className={clsx(
6666
activeHeading == heading.slug &&
6767
"text-gray-900 dark:text-gray-50",
6868
"block py-1 text-sm text-gray-400 hover:text-gray-900 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand",

‎app/components/package-select.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from "classnames";
1+
import { clsx } from "clsx";
22
import { Link, useParams } from "react-router";
33

44
import iconsHref from "~/icons.svg";
@@ -50,7 +50,7 @@ function PackageLink({
5050
"relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-['']";
5151
return active ? (
5252
<span
53-
className={classNames(
53+
className={clsx(
5454
className,
5555
"font-bold text-red-brand before:bg-red-brand",
5656
)}
@@ -61,7 +61,7 @@ function PackageLink({
6161
<Link
6262
to={`../${href}`}
6363
relative="path"
64-
className={classNames(
64+
className={clsx(
6565
className,
6666
"hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand",
6767
)}

‎app/components/version-select.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DetailsMenu } from "~/modules/details-menu";
33
import { DetailsPopup } from "./details-popup";
44
import { PopupLabel } from "./popup-label";
55
import { Link, useParams } from "react-router";
6-
import classNames from "classnames";
6+
import { clsx } from "clsx";
77
import { useHeaderData } from "./docs-header/use-header-data";
88
import { useNavigation } from "~/hooks/use-navigation";
99

@@ -26,7 +26,7 @@ export function VersionSelect() {
2626
<DetailsMenu className="group relative">
2727
<summary
2828
title={label}
29-
className={classNames(
29+
className={clsx(
3030
`_no-triangle relative flex h-[40px] w-24 cursor-pointer list-none items-center justify-between gap-3 overflow-hidden whitespace-nowrap rounded-full px-3`,
3131
className,
3232
)}
@@ -96,7 +96,7 @@ function RefLink({ to, children }: { to: string; children: React.ReactNode }) {
9696
return (
9797
<a
9898
href={to}
99-
className={classNames(
99+
className={clsx(
100100
className,
101101
"after:absolute after:right-4 after:top-1 after:block after:-rotate-45 after:opacity-50 after:content-['→']",
102102
// Same as !isActive styles on <Link> below
@@ -110,7 +110,7 @@ function RefLink({ to, children }: { to: string; children: React.ReactNode }) {
110110

111111
return (
112112
<Link
113-
className={classNames(
113+
className={clsx(
114114
className,
115115
isActive
116116
? "font-bold text-red-brand before:bg-red-brand"

‎app/pages/brand.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from "classnames";
1+
import { clsx } from "clsx";
22
import type { Route } from "./+types/brand";
33

44
export const meta: Route.MetaFunction = () => {
@@ -38,7 +38,7 @@ export default function Brand() {
3838
<p>
3939
<a
4040
href="/_brand/React Router Brand Assets.zip"
41-
className="underline opacity-50 hover:opacity-100"
41+
className="underline hover:text-red-brand"
4242
download
4343
>
4444
React Router Brand Assets
@@ -140,7 +140,7 @@ function LogoBox({
140140
return (
141141
<div className="flex flex-col">
142142
<div
143-
className={classNames(
143+
className={clsx(
144144
`flex aspect-[16/9] items-center justify-center rounded-md`,
145145
background[theme],
146146
)}

‎app/pages/docs-home.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { HeadersArgs } from "react-router";
22
import { Link } from "react-router";
3-
import classNames from "classnames";
3+
import { clsx } from "clsx";
44
import { CACHE_CONTROL } from "~/http";
55
import { getSearchMetaTags, getDocTitle } from "~/ui/meta";
66
import { seo } from "~/seo";
@@ -127,7 +127,7 @@ function V7() {
127127
className="group relative flex flex-col gap-1 rounded-lg border-[3px] border-gray-50 p-4 pt-6 hover:border-gray-100 dark:border-gray-800 hover:dark:border-gray-600 md:p-6"
128128
>
129129
<h2
130-
className={classNames(
130+
className={clsx(
131131
className,
132132
"text-2xl font-bold tracking-tight group-hover:underline",
133133
)}
@@ -264,7 +264,7 @@ function V6() {
264264
className="group relative flex flex-col gap-1 rounded-lg border-[3px] border-gray-50 p-4 pt-6 hover:border-gray-100 dark:border-gray-800 hover:dark:border-gray-600 md:p-6"
265265
>
266266
<h2
267-
className={classNames(
267+
className={clsx(
268268
className,
269269
"text-2xl font-bold tracking-tight group-hover:underline",
270270
)}

‎app/pages/docs-layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Outlet, redirect } from "react-router";
2-
import classNames from "classnames";
2+
import { clsx } from "clsx";
33

44
import { Header } from "~/components/docs-header/docs-header";
55
import { getHeaderData } from "~/components/docs-header/data.server";
@@ -105,7 +105,7 @@ export default function DocsLayout({ loaderData }: Route.ComponentProps) {
105105
</NavMenuDesktop>
106106
<div
107107
ref={docsContainer}
108-
className={classNames(
108+
className={clsx(
109109
// add scroll margin to focused elements so that they aren't
110110
// obscured by the sticky header
111111
"[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",

0 commit comments

Comments
 (0)