初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import type { ComponentProps, FC } from 'react'
import classNames from '@/utils/classnames'
 
const baseStyle = 'py-[3px]'
 
export type SliceContainerProps = ComponentProps<'span'>
 
export const SliceContainer: FC<SliceContainerProps> = (
  {
    ref,
    ...props
  },
) => {
  const { className, ...rest } = props
  return <span {...rest} ref={ref} className={classNames(
    'group align-bottom mr-1 select-none text-sm',
    className,
  )} />
}
SliceContainer.displayName = 'SliceContainer'
 
export type SliceLabelProps = ComponentProps<'span'> & { labelInnerClassName?: string }
 
export const SliceLabel: FC<SliceLabelProps> = (
  {
    ref,
    ...props
  },
) => {
  const { className, children, labelInnerClassName, ...rest } = props
  return <span {...rest} ref={ref} className={classNames(
    baseStyle,
    'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary',
    className,
  )}>
    <span className={classNames('text-nowrap', labelInnerClassName)}>
      {children}
    </span>
  </span>
}
SliceLabel.displayName = 'SliceLabel'
 
export type SliceContentProps = ComponentProps<'span'>
 
export const SliceContent: FC<SliceContentProps> = (
  {
    ref,
    ...props
  },
) => {
  const { className, children, ...rest } = props
  return <span {...rest} ref={ref} className={classNames(
    baseStyle,
    'px-1 bg-state-base-hover group-hover:bg-state-accent-hover-alt group-hover:text-text-primary leading-7 whitespace-pre-line break-all',
    className,
  )}>
    {children}
  </span>
}
SliceContent.displayName = 'SliceContent'
 
export type SliceDividerProps = ComponentProps<'span'>
 
export const SliceDivider: FC<SliceDividerProps> = (
  {
    ref,
    ...props
  },
) => {
  const { className, ...rest } = props
  return <span {...rest} ref={ref} className={classNames(
    baseStyle,
    'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
    className,
  )}>
    {/* use a zero-width space to make the hover area bigger */}
    &#8203;
  </span>
}
SliceDivider.displayName = 'SliceDivider'