refactor: unified cn utils (#29916)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
This commit is contained in:
Stephen Zhou
2025-12-19 12:08:34 +08:00
committed by GitHub
parent 80f11471ae
commit a26881cb24
815 changed files with 1064 additions and 1227 deletions

View File

@@ -9,7 +9,7 @@ import {
} from 'react'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { writeTextToClipboard } from '@/utils/clipboard'
import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
@@ -50,12 +50,10 @@ function CopyButton({ code }: { code: string }) {
return (
<button
type="button"
className={classNames(
'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
className={cn('group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
copied
? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
: 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
)}
: 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5')}
onClick={() => {
writeTextToClipboard(code).then(() => {
setCopyCount(count => count + 1)
@@ -64,20 +62,16 @@ function CopyButton({ code }: { code: string }) {
>
<span
aria-hidden={copied}
className={classNames(
'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
copied && '-translate-y-1.5 opacity-0',
)}
className={cn('pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
copied && '-translate-y-1.5 opacity-0')}
>
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
Copy
</span>
<span
aria-hidden={!copied}
className={classNames(
'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
!copied && 'translate-y-1.5 opacity-0',
)}
className={cn('pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
!copied && 'translate-y-1.5 opacity-0')}
>
Copied!
</span>
@@ -168,12 +162,10 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
{tabTitles!.map((tabTitle, tabIndex) => (
<Tab
key={tabIndex}
className={classNames(
'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
className={cn('border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
tabIndex === selectedIndex
? 'border-emerald-500 text-emerald-400'
: 'border-transparent text-zinc-400 hover:text-zinc-300',
)}
: 'border-transparent text-zinc-400 hover:text-zinc-300')}
>
{tabTitle}
</Tab>