78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { Button } from './Button'
|
|
import { SpanBox, HStack } from './LayoutPrimitives'
|
|
import { Circle, X } from '@phosphor-icons/react'
|
|
import { isDarkTheme } from '../../lib/themeUpdater'
|
|
import { Label } from '../../lib/networking/fragments/labelFragment'
|
|
import { useMemo } from 'react'
|
|
import { theme } from '../tokens/stitches.config'
|
|
|
|
type EditLabelChipStackProps = {
|
|
labels: Label[]
|
|
isSelected?: boolean
|
|
setExpanded: (expanded: boolean) => void
|
|
}
|
|
|
|
export function EditLabelChipStack(
|
|
props: EditLabelChipStackProps
|
|
): JSX.Element {
|
|
const isDark = isDarkTheme()
|
|
|
|
const selectedBorder = isDark ? '#FFEA9F' : '$omnivoreGray'
|
|
const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
|
|
|
|
const colors = useMemo(() => {
|
|
const mapped = props.labels.map((l) => l.color)
|
|
if (mapped.length > 7) {
|
|
const set = new Set(mapped)
|
|
return Array.from(set).slice(0, 7)
|
|
}
|
|
return mapped
|
|
}, [props])
|
|
|
|
return (
|
|
<SpanBox
|
|
css={{
|
|
display: 'inline-table',
|
|
margin: '2px',
|
|
fontSize: '11px',
|
|
fontWeight: '500',
|
|
fontFamily: '$inter',
|
|
padding: '1px 7px',
|
|
whiteSpace: 'nowrap',
|
|
cursor: 'pointer',
|
|
backgroundClip: 'padding-box',
|
|
borderRadius: '5px',
|
|
borderWidth: '1px',
|
|
borderStyle: 'solid',
|
|
color: isDark ? '#EBEBEB' : '#2A2A2A',
|
|
borderColor: props.isSelected ? selectedBorder : unSelectedBorder,
|
|
backgroundColor: isDark ? '#2A2A2A' : '#F9F9F9',
|
|
}}
|
|
onClick={(event) => {
|
|
props.setExpanded(true)
|
|
event.preventDefault()
|
|
}}
|
|
>
|
|
<HStack
|
|
distribution="center"
|
|
alignment="center"
|
|
css={{ gap: '7px', pl: '15px' }}
|
|
>
|
|
{colors.map((color, idx) => (
|
|
<SpanBox
|
|
key={`label-color${idx}`}
|
|
css={{
|
|
marginLeft: -15,
|
|
height: '100%',
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
<Circle size={14} color={color} weight="fill" />
|
|
</SpanBox>
|
|
))}
|
|
<SpanBox css={{ pt: '1px' }}>{`${props.labels.length} labels`}</SpanBox>
|
|
</HStack>
|
|
</SpanBox>
|
|
)
|
|
}
|