improve the chipset widget

Author: medyo

src/components/Elements/ChipsSet/ChipsSet.tsx

@@ -1,5 +1,6 @@
-import { Option } from 'src/types'
 import { useState } from 'react'
+import { Option } from 'src/types'
+import './chipset.css'
 
 type ChipProps = {
   option: Option
@@ -10,30 +11,41 @@ type ChipProps = {
 const Chip = ({ option, onSelect, active = false }: ChipProps) => {
   return (
     <button className={'chip ' + (active && 'active')} onClick={() => onSelect(option)}>
+      {option.icon && <span className="chipIcon">{option.icon}</span>}
       {option.label}
     </button>
   )
 }
-
+type ChangeAction = 'ADD' | 'REMOVE'
 type ChipsSetProps = {
   options: Option[]
-  defaultValue: Option
-  onChange: (option: Option) => void
+  defaultValues?: string[]
+  onChange?: (action: ChangeAction, option: Option) => void
 }
 
-export const ChipsSet = ({ options, onChange, defaultValue }: ChipsSetProps) => {
-  const [selectedChip, setSelectedChip] = useState<Option>(defaultValue)
+export const ChipsSet = ({ options, onChange, defaultValues }: ChipsSetProps) => {
+  const [selectedChips, setSelectedChips] = useState<string[] | undefined>(defaultValues || [])
 
   const onSelect = (option: Option) => {
-    setSelectedChip(option)
-    onChange(option)
+    if (selectedChips?.some((chipValue) => chipValue === option.value)) {
+      setSelectedChips((prev) => prev?.filter((chipValue) => chipValue !== option.value))
+      onChange && onChange('REMOVE', option)
+    } else {
+      setSelectedChips((prev) => [...(prev || []), option.value])
+      onChange && onChange('ADD', option)
+    }
   }
 
   return (
     <div className="chipsSet">
       {options.map((option) => {
         return (
-          <Chip option={option} onSelect={onSelect} active={selectedChip.value === option.value} />
+          <Chip
+            key={option.value}
+            option={option}
+            onSelect={onSelect}
+            active={selectedChips?.some((chipValue) => chipValue === option.value) || false}
+          />
         )
       })}
     </div>

src/components/Elements/ChipsSet/chipset.css

@@ -0,0 +1,42 @@
+.chipsSet {
+  margin: 6px 0;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  font-weight: 500;
+  border-radius: 50px;
+  padding: 6px 12px;
+  border: transparent;
+  font-family: 'nunito';
+  color: var(--chip-text);
+  background-color: var(--chip-background);
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  cursor: pointer;
+}
+.chip:hover {
+  filter: brightness(95%);
+}
+
+.chip .chipIcon {
+  margin: 0;
+  padding: 0;
+  line-height: 14px;
+}
+.chip .chipIcon > img,
+.chip .chipIcon > svg {
+  background-color: white;
+  color: black;
+  border-radius: 50px;
+  padding: 2px;
+  width: 20px;
+  height: 20px;
+}
+.chip.active {
+  background-color: var(--chip-active-background);
+  color: var(--chip-active-text);
+}

src/components/Elements/FloatingFilter/FloatingFilter.tsx

@@ -44,16 +44,13 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
                 <p className="settingTitle">Language</p>
                 <div className="settingContent">
                   <ChipsSet
-                    defaultValue={
-                      availableTagOptions.find(
-                        (tag) => tag.value === cardsSettings[card.value]?.language
-                      ) || {
-                        label: GLOBAL_TAG.label,
-                        value: GLOBAL_TAG.value,
-                      }
+                    defaultValues={
+                      availableTagOptions
+                        .filter((tag) => tag.value === cardsSettings[card.value]?.language)
+                        ?.map((tag) => tag.label) || [GLOBAL_TAG.value]
                     }
                     options={availableTagOptions}
-                    onChange={(option) => {
+                    onChange={(_, option) => {
                       setCardSettings(card.value, {
                         ...cardsSettings[card.value],
                         language: option.value,
@@ -70,13 +67,13 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
                 <p className="settingTitle">Date Range</p>
                 <div className="settingContent">
                   <ChipsSet
-                    defaultValue={
-                      dateRanges.find(
-                        (date) => date.value === cardsSettings[card.value]?.dateRange
-                      ) || dateRanges[0]
+                    defaultValues={
+                      dateRanges
+                        .filter((date) => date.value === cardsSettings[card.value]?.dateRange)
+                        .map((date) => date.value) || dateRanges[0].value
                     }
                     options={dateRanges}
-                    onChange={(option) => {
+                    onChange={(_, option) => {
                       setCardSettings(card.value, {
                         ...cardsSettings[card.value],
                         dateRange: option.value,