feat(plugin-docs): using classnames package to organize tailwind classnames
MODIFY
packages/plugin-docs/client/theme-doc/ThemeSwitch.tsx
packages/plugin-docs/client/theme-doc/ThemeSwitch.tsx
+import cx from 'classnames';
import React, { useState } from 'react';
import MoonIcon from './icons/moon.png';
import SunIcon from './icons/sun.png';
@@ -5,22 +6,21 @@ import SunIcon from './icons/sun.png';
export default () => {
const [toggle, setToggle] = useState(true);
- const toggleClass = ' transform translate-x-6';
-
return (
<div
- className={
- 'md:w-12 md:h-6 w-12 h-4 flex items-center bg-gray-300 ' +
- 'rounded-full p-1 cursor-pointer' +
- (toggle ? ' bg-blue-300' : ' bg-gray-700')
- }
+ className={cx(
+ 'md:w-12 md:h-6 w-12 h-4 flex items-center bg-gray-300 rounded-full ',
+ 'py-1 px-1.5 cursor-pointer',
+ toggle ? 'bg-blue-300' : 'bg-gray-700',
+ )}
onClick={() => setToggle(!toggle)}
>
<div
- className={
- 'md:w-4 md:h-4 h-3 w-3 rounded-full shadow-md transition transform' +
- (toggle ? null : toggleClass)
- }
+ className={cx(
+ 'md:w-4 md:h-4 h-3 w-3 rounded-full shadow-md ',
+ 'transition transform',
+ toggle && 'translate-x-5',
+ )}
>
<img
src={toggle ? SunIcon : MoonIcon}

MODIFY
packages/plugin-docs/package.json
packages/plugin-docs/package.json
"dev": "pnpm build -- --watch"
},
"dependencies": {
- "@mdx-js/mdx": "1.6.22"
+ "@mdx-js/mdx": "1.6.22",
+ "classnames": "^2.3.1"
},
"devDependencies": {
"tailwindcss": "^3.0.15",

MODIFY
pnpm-lock.yaml
pnpm-lock.yaml
@@ -643,10 +643,12 @@ importers:
packages/plugin-docs:
specifiers:
'@mdx-js/mdx': 1.6.22
+ classnames: ^2.3.1
tailwindcss: ^3.0.15
umi: 4.0.0-beta.16
dependencies:
'@mdx-js/mdx': 1.6.22
+ classnames: 2.3.1
devDependencies:
tailwindcss: 3.0.15_ts-node@10.4.0
umi: link:../umi

feat(plugin-docs): using classnames package to organize tailwind classnames (#296)