统一的复制按钮组件，支持多种变体样式。

'use client';

type CopyButtonVariant = "icon" | "ghost" | "outline" | "text" | "inline"
type CopyButtonSize = "xs" | "sm" | "md" | "lg"

interface CopyButtonProps {
  text: string
  variant?: CopyButtonVariant
  size?: CopyButtonSize
  className?: string
  label?: string
  copiedLabel?: string
  disabled?: boolean
}

const sizeConfig: Record<CopyButtonSize, { icon: string; button: string; text: string }> = {
  xs: { icon: "h-3 w-3", button: "h-6 w-6", text: "text-xs" },
  sm: { icon: "h-3.5 w-3.5", button: "h-7 w-7", text: "text-xs" },
  md: { icon: "h-4 w-4", button: "h-8 w-8", text: "text-sm" },
  lg: { icon: "h-5 w-5", button: "h-10 w-10", text: "text-base" },
}

const variantStyles: Record<CopyButtonVariant, string> = {
  icon: "p-1.5 rounded-md bg-white/5 backdrop-blur-sm text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300 transition-all",
  ghost: "hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full transition-colors",
  outline: "border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors",
  text: "text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors",
  inline: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors",
}

function CopyIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  )
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  )
}

function cn(...classes: (string | undefined | false)[]) {
  return classes.filter(Boolean).join(' ')
}

function CopyButton({
  text = "Hello World",
  variant = "outline",
  size = "md",
  className,
  label = "复制",
  copiedLabel = "已复制",
  disabled = false,
}: CopyButtonProps) {
  const [isCopied, setIsCopied] = React.useState(false)

  const handleCopy = React.useCallback(async (e: React.MouseEvent) => {
    e.stopPropagation()
    if (disabled || !text) return

    try {
      await navigator.clipboard.writeText(text)
      setIsCopied(true)
      setTimeout(() => setIsCopied(false), 2000)
    } catch (error) {
      console.error("复制失败:", error)
    }
  }, [text, disabled])

  const sizeStyles = sizeConfig[size]

  const IconComponent = isCopied
    ? <CheckIcon className={cn(sizeStyles.icon, "text-green-500")} />
    : <CopyIcon className={sizeStyles.icon} />

  const buttonContent = variant === "text" ? (
    <span className={cn(sizeStyles.text, "flex items-center gap-1.5")}>
      {IconComponent}
      {label && <span>{isCopied ? copiedLabel : label}</span>}
    </span>
  ) : IconComponent

  return (
    <button
      type="button"
      onClick={handleCopy}
      disabled={disabled}
      className={cn(
        variantStyles[variant],
        variant !== "text" && sizeStyles.button,
        "flex items-center justify-center shrink-0",
        disabled && "opacity-50 cursor-not-allowed",
        className
      )}
      aria-label={isCopied ? "已复制" : "复制到剪贴板"}
    >
      {buttonContent}
    </button>
  )
}

1c:T1afb,

轻量级骨架屏组件，波浪闪烁动画

'use client';

export function SkeletonDemo() {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <style>{`
        @keyframes sk-pulse {
          0%, 100% { opacity: 0.15; }
          50% { opacity: 0.25; }
        }
      `}</style>
      <div style={{ width: '100%', height: 16, borderRadius: 4, backgroundColor: '#888', animation: 'sk-pulse 1.2s ease-in-out infinite' }} />
      <div style={{ width: '85%', height: 16, borderRadius: 4, backgroundColor: '#888', animation: 'sk-pulse 1.2s ease-in-out infinite', animationDelay: '0.1s' }} />
      <div style={{ width: '70%', height: 16, borderRadius: 4, backgroundColor: '#888', animation: 'sk-pulse 1.2s ease-in-out infinite', animationDelay: '0.2s' }} />
    </div>
  );
}

1d:T1ba9,

Google Material Design 风格骨架屏，渐变波浪动画

'use client';

export function GoogleSkeleton() {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <style>{`
        @keyframes google-shimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
        .g-skeleton {
          background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%);
          background-size: 200% 100%;
          animation: google-shimmer 1.5s ease-in-out infinite;
        }
      `}</style>
      <div className="g-skeleton" style={{ width: '100%', height: 20, borderRadius: 4 }} />
      <div className="g-skeleton" style={{ width: '90%', height: 20, borderRadius: 4 }} />
      <div className="g-skeleton" style={{ width: '75%', height: 20, borderRadius: 4 }} />
    </div>
  );
}

1e:T6e31,

Material Design 3 风格模态框组件

'use client';

export function GoogleDialog() {
  const [open, setOpen] = React.useState(false);
  const [closing, setClosing] = React.useState(false);

  const handleClose = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setClosing(true);
    setTimeout(() => {
      setOpen(false);
      setClosing(false);
    }, 150);
  };

  const handleOpen = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setOpen(true);
  };

  return (
    <>
      <button onClick={handleOpen} style={{ padding: '10px 24px', border: 'none', background: '#6750a4', color: '#fff', fontSize: 14, fontWeight: 500, borderRadius: 20, cursor: 'pointer' }}>
        Open Dialog
      </button>
      {open && (
        <Portal>
          <style>{`
            @keyframes md-scrim-open { from { opacity: 0; } to { opacity: 0.32; } }
            @keyframes md-scrim-close { from { opacity: 0.32; } to { opacity: 0; } }
            @keyframes md-dialog-slide-open { from { transform: translateY(-50px); } to { transform: translateY(0); } }
            @keyframes md-dialog-slide-close { from { transform: translateY(0); } to { transform: translateY(-50px); } }
            @keyframes md-container-grow { from { clip-path: inset(0 0 65% 0 round 28px); opacity: 0; } to { clip-path: inset(0 0 0 0 round 28px); opacity: 1; } }
            @keyframes md-container-shrink { from { clip-path: inset(0 0 0 0 round 28px); opacity: 1; } to { clip-path: inset(0 0 65% 0 round 28px); opacity: 0; } }
            @keyframes md-content-open { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } }
            @keyframes md-content-close { from { opacity: 1; } to { opacity: 0; } }
            @keyframes md-actions-open { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
          `}</style>
          <div onClick={handleClose} style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundColor: '#000', animation: closing ? 'md-scrim-close 150ms linear forwards' : 'md-scrim-open 500ms linear forwards' }} />
            <div onClick={(e) => e.stopPropagation()} style={{
              position: 'relative',
              backgroundColor: '#f3edf7',
              borderRadius: 28,
              minWidth: 280,
              maxWidth: 560,
              width: 'calc(100% - 48px)',
              boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.16)',
              animation: closing 
                ? 'md-dialog-slide-close 150ms cubic-bezier(.3,0,.8,.15) forwards, md-container-shrink 150ms cubic-bezier(.3,0,.8,.15) forwards' 
                : 'md-dialog-slide-open 500ms cubic-bezier(.3,0,0,1) forwards, md-container-grow 500ms cubic-bezier(.3,0,0,1) forwards',
              overflow: 'hidden'
            }}>
              <div style={{ padding: '24px 24px 16px', fontSize: 24, fontWeight: 400, color: '#1d1b20', animation: closing ? 'md-content-close 100ms linear forwards' : 'md-content-open 250ms linear forwards' }}>
                Basic dialog title
              </div>
              <div style={{ padding: '0 24px 24px', fontSize: 14, lineHeight: 1.43, color: '#49454f', animation: closing ? 'md-content-close 100ms linear forwards' : 'md-content-open 250ms linear forwards' }}>
                A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '0 24px 24px', animation: closing ? 'md-content-close 100ms linear forwards' : 'md-actions-open 300ms linear forwards' }}>
                <button onClick={handleClose} style={{ padding: '10px 12px', border: 'none', background: 'transparent', color: '#6750a4', fontSize: 14, fontWeight: 500, borderRadius: 20, cursor: 'pointer' }}>Cancel</button>
                <button onClick={handleClose} style={{ padding: '10px 24px', border: 'none', background: '#6750a4', color: '#fff', fontSize: 14, fontWeight: 500, borderRadius: 20, cursor: 'pointer' }}>Confirm</button>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </>
  );
}