diff --git a/packages/web/components/elements/EditLabelChipStack.tsx b/packages/web/components/elements/EditLabelChipStack.tsx new file mode 100644 index 000000000..d31d1496a --- /dev/null +++ b/packages/web/components/elements/EditLabelChipStack.tsx @@ -0,0 +1,76 @@ +import { Button } from './Button' +import { SpanBox, HStack } from './LayoutPrimitives' +import { Circle, X } from 'phosphor-react' +import { isDarkTheme } from '../../lib/themeUpdater' +import { Label } from '../../lib/networking/fragments/labelFragment' +import { useMemo } from 'react' + +type EditLabelChipStackProps = { + labels: Label[] + isSelected?: boolean + setExpanded: (expanded: boolean) => void +} + +export function EditLabelChipStack( + props: EditLabelChipStackProps +): JSX.Element { + const isDark = isDarkTheme() + + const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9' + 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 ( + { + props.setExpanded(true) + event.preventDefault() + }} + > + + {colors.map((color, idx) => ( + + + + ))} + {`${props.labels.length} labels`} + + + ) +}