Skip to content

Commit 645de0e

Browse files
deep-cdeep-c
committed
use classnames package
1 parent 3e66ad0 commit 645de0e

File tree

6 files changed

+80
-79
lines changed

6 files changed

+80
-79
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"babel-jest": "27.0.6",
8383
"babel-plugin-dynamic-import-node": "2.3.3",
8484
"babel-plugin-react-remove-properties": "0.3.0",
85+
"classnames": "2.3.1",
8586
"cross-env": "7.0.3",
8687
"dotenv-cli": "4.0.0",
8788
"eslint": "7.32.0",

‎src/components/UserProfileDropdown/UserProfileDropdown.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Menu, Transition } from '@headlessui/react';
2+
import classnames from 'classnames';
23
import { signOut } from 'next-auth/client';
34
import Image from 'next/image';
45
import React, { Fragment } from 'react';
56

67
import ActiveLink from 'src/components/ActiveLink';
78
import { ACCOUNT_SETTINGS, ADMIN_LOGIN } from 'src/routes';
8-
import { classNames } from 'src/utils/ui';
99

1010
const AccountDropdown: React.FC = () => (
1111
<Menu as="div" className="relative ml-3">
@@ -43,12 +43,10 @@ const AccountDropdown: React.FC = () => (
4343
<ActiveLink href={ACCOUNT_SETTINGS.path}>
4444
{({ isActive }) => (
4545
<a
46-
className={classNames(
47-
isActive
48-
? 'bg-gray-100 text-gray-900'
49-
: 'text-gray-700',
50-
'block px-4 py-2 text-sm'
51-
)}
46+
className={classnames('block px-4 py-2 text-sm', {
47+
'bg-gray-100 text-gray-900': isActive,
48+
'text-gray-700': !isActive,
49+
})}
5250
>
5351
Settings
5452
</a>
@@ -61,10 +59,10 @@ const AccountDropdown: React.FC = () => (
6159
<Menu.Item>
6260
{({ active }) => (
6361
<button
64-
className={classNames(
65-
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
66-
'block px-4 py-2 text-sm'
67-
)}
62+
className={classnames('block px-4 py-2 text-sm', {
63+
'bg-gray-100 text-gray-900': active,
64+
'text-gray-700': !active,
65+
})}
6866
onClick={() =>
6967
signOut({
7068
callbackUrl:

‎src/layouts/AdminLayout/Sidebar.tsx

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Dialog, Transition } from '@headlessui/react';
22
import { LogoutIcon, XIcon } from '@heroicons/react/outline';
3+
import classnames from 'classnames';
34
import { signOut } from 'next-auth/client';
45
import Image from 'next/image';
56
import React, { Fragment, useCallback } from 'react';
@@ -14,7 +15,6 @@ import {
1415
ADMIN_USERS,
1516
filterRoutesForRole,
1617
} from 'src/routes';
17-
import { classNames } from 'src/utils/ui';
1818

1919
import type { Session } from 'src/components/Auth';
2020

@@ -39,7 +39,7 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
3939
<Transition.Root as={Fragment} show={open}>
4040
<Dialog
4141
as="div"
42-
className="fixed inset-0 flex z-40 lg:hidden"
42+
className="fixed inset-0 z-40 flex lg:hidden"
4343
onClose={handleState}
4444
open={open}
4545
static
@@ -64,7 +64,7 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
6464
leaveFrom="translate-x-0"
6565
leaveTo="-translate-x-full"
6666
>
67-
<div className="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
67+
<div className="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-white">
6868
<Transition.Child
6969
as={Fragment}
7070
enter="ease-in-out duration-300"
@@ -74,50 +74,54 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
7474
leaveFrom="opacity-100"
7575
leaveTo="opacity-0"
7676
>
77-
<div className="absolute top-0 right-0 -mr-12 pt-2">
77+
<div className="absolute top-0 right-0 pt-2 -mr-12">
7878
<button
79-
className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
79+
className="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
8080
onClick={() => handleState(false)}
8181
type="button"
8282
>
8383
<span className="sr-only">Close sidebar</span>
84-
<XIcon aria-hidden="true" className="h-6 w-6 text-white" />
84+
<XIcon aria-hidden="true" className="w-6 h-6 text-white" />
8585
</button>
8686
</div>
8787
</Transition.Child>
88-
<div className="flex-shrink-0 flex items-center px-4">
88+
<div className="flex items-center flex-shrink-0 px-4">
8989
<Image
9090
alt="Workflow"
91-
className="h-8 w-auto"
91+
className="w-auto h-8"
9292
height={50}
9393
src="https://tailwindui.com/img/logos/workflow-logo-purple-500-mark-gray-700-text.svg"
9494
width={200}
9595
/>
9696
</div>
97-
<div className="mt-5 flex-1 h-0 overflow-y-auto">
97+
<div className="flex-1 h-0 mt-5 overflow-y-auto">
9898
<nav className="px-2">
9999
<div className="space-y-1">
100100
{navigation.filter(filterRoutes).map((item) => (
101101
<ActiveLink key={item.path} href={item.path} nested>
102102
{({ isActive }) => (
103103
<a
104104
aria-current={isActive ? 'page' : undefined}
105-
className={classNames(
106-
isActive
107-
? 'bg-gray-100 text-gray-900'
108-
: // eslint-disable-next-line max-len
109-
'text-gray-600 hover:text-gray-900 hover:bg-gray-50',
105+
className={classnames(
110106
// eslint-disable-next-line max-len
111-
'group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md'
107+
'group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md',
108+
{
109+
'bg-gray-100 text-gray-900': isActive,
110+
// eslint-disable-next-line max-len
111+
'text-gray-600 hover:text-gray-900 hover:bg-gray-50':
112+
!isActive,
113+
}
112114
)}
113115
>
114116
<item.icon
115117
aria-hidden="true"
116-
className={classNames(
117-
isActive
118-
? 'text-gray-500'
119-
: 'text-gray-400 group-hover:text-gray-500',
120-
'mr-3 flex-shrink-0 h-6 w-6'
118+
className={classnames(
119+
'mr-3 flex-shrink-0 h-6 w-6',
120+
{
121+
'text-gray-400 group-hover:text-gray-500':
122+
!isActive,
123+
'text-gray-500': isActive,
124+
}
121125
)}
122126
/>
123127
{item.name}
@@ -137,42 +141,43 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
137141
</Transition.Root>
138142
{/* Static sidebar for desktop */}
139143
<div className="hidden lg:flex lg:flex-shrink-0">
140-
<div className="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-gray-100">
144+
<div className="flex flex-col w-64 pt-5 pb-4 bg-gray-100 border-r border-gray-200">
141145
<div className="flex items-center flex-shrink-0 px-6">
142146
<Image
143147
alt="Workflow"
144-
className="h-8 w-auto"
148+
className="w-auto h-8"
145149
height={50}
146150
src="https://tailwindui.com/img/logos/workflow-logo-purple-500-mark-gray-700-text.svg"
147151
width={200}
148152
/>
149153
</div>
150-
<div className="h-0 flex-1 flex flex-col overflow-y-auto">
154+
<div className="flex flex-col flex-1 h-0 overflow-y-auto">
151155
{/* Navigation */}
152-
<nav className="flex-1 px-3 divide-y mt-6">
156+
<nav className="flex-1 px-3 mt-6 divide-y">
153157
<div className="space-y-1">
154158
{navigation.filter(filterRoutes).map((item) => (
155159
<ActiveLink key={item.path} href={item.path} nested>
156160
{({ isActive }) => (
157161
<a
158162
aria-current={isActive ? 'page' : undefined}
159-
className={classNames(
160-
isActive
161-
? 'bg-gray-200 text-gray-900'
162-
: // eslint-disable-next-line max-len
163-
'text-gray-700 hover:text-gray-900 hover:bg-gray-50',
163+
className={classnames(
164164
// eslint-disable-next-line max-len
165-
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
165+
'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
166+
{
167+
'bg-gray-200 text-gray-900': isActive,
168+
// eslint-disable-next-line max-len
169+
'text-gray-700 hover:text-gray-900 hover:bg-gray-50':
170+
!isActive,
171+
}
166172
)}
167173
>
168174
<item.icon
169175
aria-hidden="true"
170-
className={classNames(
171-
isActive
172-
? 'text-gray-500'
173-
: 'text-gray-400 group-hover:text-gray-500',
174-
'mr-3 flex-shrink-0 h-6 w-6'
175-
)}
176+
className={classnames('mr-3 flex-shrink-0 h-6 w-6', {
177+
'text-gray-400 group-hover:text-gray-500':
178+
!isActive,
179+
'text-gray-500': isActive,
180+
})}
176181
/>
177182
{item.name}
178183
</a>
@@ -181,8 +186,8 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
181186
))}
182187
</div>
183188
</nav>
184-
<div className="group w-full bg-gray-100 rounded-md px-3.5 py-2 text-sm text-left font-medium text-gray-700">
185-
<span className="flex w-full justify-between items-center">
189+
<div className="w-full py-2 text-sm font-medium text-left text-gray-700 bg-gray-100 group rounded-md px-3.5">
190+
<span className="flex items-center justify-between w-full">
186191
{session?.user && (
187192
<UserAvatar
188193
image={session.user.image}
@@ -198,35 +203,30 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
198203
{({ isActive }) => (
199204
<a
200205
aria-current={isActive ? 'page' : undefined}
201-
className={classNames(
202-
isActive
203-
? 'bg-gray-200 text-gray-900'
204-
: // eslint-disable-next-line max-len
205-
'text-gray-700 hover:text-gray-900 hover:bg-gray-50',
206+
className={classnames(
206207
// eslint-disable-next-line max-len
207-
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
208+
'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
209+
{
210+
'bg-gray-200 text-gray-900': isActive,
211+
'text-gray-700 hover:text-gray-900 hover:bg-gray-50':
212+
!isActive,
213+
}
208214
)}
209215
>
210216
<item.icon
211217
aria-hidden="true"
212-
className={classNames(
213-
isActive
214-
? 'text-gray-500'
215-
: 'text-gray-400 group-hover:text-gray-500',
216-
'mr-3 flex-shrink-0 h-6 w-6'
217-
)}
218+
className={classnames('mr-3 flex-shrink-0 h-6 w-6', {
219+
'text-gray-400 group-hover:text-gray-500': !isActive,
220+
'text-gray-500': isActive,
221+
})}
218222
/>
219223
{item.name}
220224
</a>
221225
)}
222226
</ActiveLink>
223227
))}
224228
<button
225-
className={classNames(
226-
'text-gray-700 hover:text-gray-900 hover:bg-gray-50 w-full',
227-
// eslint-disable-next-line max-len
228-
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
229-
)}
229+
className="flex items-center w-full px-2 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
230230
onClick={() =>
231231
signOut({
232232
callbackUrl:
@@ -237,10 +237,7 @@ const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
237237
>
238238
<LogoutIcon
239239
aria-hidden="true"
240-
className={classNames(
241-
'text-gray-400 group-hover:text-gray-500',
242-
'mr-3 flex-shrink-0 h-6 w-6'
243-
)}
240+
className="flex-shrink-0 w-6 h-6 mr-3 text-gray-400 group-hover:text-gray-500"
244241
/>
245242
Logout
246243
</button>

‎src/pages/admin/sessions/index.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useMutation, useQuery } from '@apollo/client';
22
import { ExclamationIcon, SearchIcon } from '@heroicons/react/outline';
3+
import classnames from 'classnames';
34
import Head from 'next/head';
45
import { useRouter } from 'next/router';
56
import React from 'react';
@@ -13,7 +14,6 @@ import { removeSessionMutation } from 'src/graphql/mutation/session';
1314
import { getSessionsForAdminQuery } from 'src/graphql/query/session';
1415
import AdminLayout from 'src/layouts/AdminLayout';
1516
import { ADMIN_USERS, NextRoutePage } from 'src/routes';
16-
import { classNames } from 'src/utils/ui';
1717

1818
import type { GetSessionsForAdmin } from 'types/graphql/GetSessionsForAdmin';
1919
import type { RemoveSession } from 'types/graphql/RemoveSession';
@@ -170,12 +170,15 @@ export const SessionsAdmin: NextRoutePage<unknown> = () => {
170170
</td>
171171
<td className="px-6 py-4 whitespace-nowrap">
172172
<span
173-
className={classNames(
174-
expiresAt > today
175-
? 'bg-green-100 text-green-800'
176-
: 'bg-red-100 text-red-800',
173+
className={classnames(
177174
// eslint-disable-next-line max-len
178-
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full'
175+
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
176+
{
177+
'bg-green-100 text-green-800':
178+
expiresAt > today,
179+
'bg-red-100 text-red-800':
180+
expiresAt <= today,
181+
}
179182
)}
180183
>
181184
{expiresAt.toLocaleDateString(locale)}

‎src/utils/ui.ts

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4091,6 +4091,11 @@ [email protected]:
40914091
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
40924092
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
40934093

4094+
[email protected]:
4095+
version "2.3.1"
4096+
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
4097+
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
4098+
40944099
clean-stack@^2.0.0:
40954100
version "2.2.0"
40964101
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"

0 commit comments

Comments
 (0)