) => {
+ const value = (event.target as HTMLInputElement).value
+
+ setSearchValue(value)
+ setNumberOfResults(
+ itemGroups
+ .map(group => group.items)
+ .flat()
+ .filter(item => {
+ return item.value?.toLowerCase().includes(value)
+ || item.subText?.toLowerCase().includes(value)
+ || item.name.toLowerCase().includes(value)
+ }).length
+ )
+ }
+
+ const select = (event: any) => {
+ const li = event.target as HTMLLIElement
+
+ setItemGroups(
+ itemGroupsWithActive.map(group => {
+ return {
+ ...group,
+ items: group.items.map(item => {
+ return {
+ ...item,
+ selected: li.dataset.name === item.name
+ }
+ })
+ }
+ })
+ )
+
+ onSelect?.({
+ ...li.dataset,
+ list: li.parentElement
+ } as ListEventType)
+ }
+
+ const selectByKey = (event: any) => {
+ if (event.key === 'Enter') {
+ select(event)
+ }
+ }
+
+ return (
+ (
+
+
+ {showSearchBarIcon && (
+
+ )}
+
+ {children}
+
+ )}>
+
+ {itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
+
+ {group.title && (
+ -
+ {group.title}
+
+ )}
+ {group.items.map((item, index) => (
+ -
+ (
+
+ {children}
+
+ )}>
+
+ (
+
{children}
+ )}>
+ {item.icon && (
+
+ )}
+ {item.name}
+
+ {item.subText && {item.subText}}
+
+
+ ))}
+
+ ))}
+
+ {showSearchBar && !numberOfResults && (
+ - {noResultsLabel}
+ )}
+
+
+ )
+}
+
+export default List
diff --git a/src/components/List/list.module.scss b/src/components/List/list.module.scss
new file mode 100644
index 0000000..1bf8e0d
--- /dev/null
+++ b/src/components/List/list.module.scss
@@ -0,0 +1,91 @@
+@import '../../scss/config.scss';
+
+.list {
+ @include spacing(0);
+
+ overflow-y: auto;
+ list-style-type: none;
+
+ &:hover li[data-selected] {
+ @include background(transparent);
+ }
+
+ li {
+ @include transition(background);
+ @include spacing(px-sm, py-xs, m-xs);
+ @include layout(flex, sm, v-center);
+ @include border-radius(md);
+
+ &:not(.title, [data-disabled]) {
+ cursor: pointer;
+ }
+
+ &:not(.title, [data-disabled]):hover,
+ &[data-selected] {
+ @include background(primary-40);
+ }
+
+ &[data-disabled],
+ &[data-disabled] span {
+ @include typography(primary-30);
+
+ cursor: default;
+ }
+
+ &[data-hidden] {
+ @include visibility(none);
+ }
+
+ &[data-id="w-no-results"] {
+ @include layout(h-center);
+ cursor: default;
+
+ &:hover {
+ @include background(transparent);
+ }
+ }
+
+ &.title {
+ @include typography(md, primary-20);
+ @include spacing(m0);
+
+ padding-bottom: 0;
+
+ &:not(:first-child) {
+ @include border(top, primary-50);
+ }
+ }
+
+ svg {
+ @include size(18px);
+ pointer-events: none;
+ }
+
+ a,
+ div {
+ @include layout(flex, sm, v-center);
+ @include typography(none);
+ flex: 1;
+ }
+
+ div {
+ pointer-events: none;
+ }
+
+ span {
+ @include typography(md, primary-20);
+ pointer-events: none;
+ }
+ }
+}
+
+.container {
+ @include border-radius(md);
+ @include border(primary-50);
+
+ input {
+ @include border(top, 0);
+ @include border(left, 0);
+ @include border(right, 0);
+ }
+}
diff --git a/src/components/List/list.ts b/src/components/List/list.ts
new file mode 100644
index 0000000..ff7b5e2
--- /dev/null
+++ b/src/components/List/list.ts
@@ -0,0 +1,37 @@
+export type ListEventType = {
+ value: string
+ name: string
+ list: HTMLUListElement
+}
+
+export type ListProps = {
+ showSearchBar?: boolean
+ showSearchBarIcon?: boolean
+ searchBarPlaceholder?: string
+ noResultsLabel?: string
+ maxHeight?: string
+ id?: string
+ className?: string
+ wrapperClassName?: string
+ itemGroups: {
+ title?: string
+ items: {
+ name: string
+ value?: string
+ href?: string
+ target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+ selected?: boolean
+ disabled?: boolean
+ icon?: string
+ subText?: string
+ }[]
+ }[]
+}
+
+export type SvelteListProps = {
+ onSelect?: (event: ListEventType) => void
+} & ListProps
+
+export type ReactListProps = {
+ onSelect?: (event: ListEventType) => void
+} & ListProps
diff --git a/src/components/Menu/Menu.astro b/src/components/Menu/Menu.astro
index a1ee360..732bfed 100644
--- a/src/components/Menu/Menu.astro
+++ b/src/components/Menu/Menu.astro
@@ -1,5 +1,6 @@
---
import type { MenuProps } from './menu'
+
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
import styles from './menu.module.scss'
@@ -107,5 +108,5 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
header.dataset.active = header.dataset.active === 'true'
? 'false'
: 'true'
- })
+ })
diff --git a/src/components/Menu/Menu.svelte b/src/components/Menu/Menu.svelte
index a9b2b56..373a273 100644
--- a/src/components/Menu/Menu.svelte
+++ b/src/components/Menu/Menu.svelte
@@ -1,10 +1,12 @@
diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx
index ed1d5c2..88d8f00 100644
--- a/src/components/Rating/Rating.tsx
+++ b/src/components/Rating/Rating.tsx
@@ -1,10 +1,12 @@
import React from 'react'
import type { RatingProps } from './rating'
+
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
-import styles from './rating.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './rating.module.scss'
+
const Rating = ({
score,
total = 5,
@@ -32,7 +34,7 @@ const Rating = ({
...(size && { '--w-rating-size': `${size}px` }),
...(emptyColor && { '--w-rating-empty-color': emptyColor })
} as React.CSSProperties
-
+
const translatedText = text
.replace('{0}', `${score}`)
.replace('{1}', `${total}`)
diff --git a/src/components/Select/Select.astro b/src/components/Select/Select.astro
new file mode 100644
index 0000000..2ec7cda
--- /dev/null
+++ b/src/components/Select/Select.astro
@@ -0,0 +1,135 @@
+---
+import type { SelectProps } from './select'
+
+import Input from '../Input/Input.astro'
+import List from '../List/List.astro'
+import Modal from '../Modal/Modal.astro'
+import Popover from '../Popover/Popover.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+import styles from './select.module.scss'
+
+interface Props extends SelectProps {}
+
+const {
+ name,
+ value,
+ placeholder,
+ label,
+ subText,
+ disabled,
+ className,
+ position,
+ ...rest
+} = Astro.props
+
+const classes = classNames([
+ styles.select,
+ disabled && styles.disabled,
+ className
+])
+---
+
+
+
+
+{position === 'modal'
+ ? (
+
+
+
+ ) : (
+
+
+
+ )
+}
+
+
diff --git a/src/components/Select/Select.svelte b/src/components/Select/Select.svelte
new file mode 100644
index 0000000..813ab50
--- /dev/null
+++ b/src/components/Select/Select.svelte
@@ -0,0 +1,122 @@
+
+
+
+ {@html ArrowDown}
+
+{#if position === 'modal'}
+
+
+
+{:else}
+
+
+
+{/if}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
new file mode 100644
index 0000000..ec48086
--- /dev/null
+++ b/src/components/Select/Select.tsx
@@ -0,0 +1,142 @@
+import React, { useEffect,useState } from 'react'
+import type { ReactSelectProps } from './select'
+
+import Input from '../Input/Input.tsx'
+import List from '../List/List.tsx'
+import Modal from '../Modal/Modal.tsx'
+import Popover from '../Popover/Popover.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce } from '../../utils/debounce'
+import { modal } from '../../utils/modal'
+import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+import styles from './select.module.scss'
+
+const Select = ({
+ name,
+ value,
+ placeholder,
+ label,
+ subText,
+ disabled,
+ className,
+ position = 'bottom',
+ onChange,
+ ...rest
+}: ReactSelectProps) => {
+ const [val, setValue] = useState(value)
+
+ const classes = classNames([
+ styles.select,
+ className
+ ])
+
+ const popoverClasses = classNames([
+ `w-options-${name}`,
+ styles.popover
+ ])
+
+ let popoverInstance: any
+
+ const select = (payload: any) => {
+ closePopover(`.w-options-${name}`)
+
+ setValue(payload.name)
+
+ onChange?.({
+ select: name,
+ ...payload
+ })
+ }
+
+ useEffect(() => {
+ if (position === 'modal') {
+ modal({
+ trigger: `.w-select-${name}`,
+ modal: `.w-options-${name}`,
+ onOpen: ({ modal }) => {
+ const search = modal.querySelector('input')
+
+ if (search) {
+ search.focus()
+ }
+ }
+ })
+ } else {
+ setTimeout(() => {
+ const resize = debounce(() => {
+ const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
+
+ const { width } = selectElement.getBoundingClientRect()
+ const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+
+ dialogElement.style.width = `${width}px`
+ })
+
+ new ResizeObserver(() => resize()).observe(document.body)
+
+ popoverInstance = popover({
+ trigger: `.w-select-${name}`,
+ popover: `.w-options-${name}`,
+ position: position as PopoverPosition,
+ onOpen({ popover }) {
+ const search = popover.querySelector('input')
+
+ if (search) {
+ search.focus()
+ }
+ }
+ })
+ }, 0)
+ }
+
+ return () => {
+ popoverInstance?.remove()
+ }
+ }, [])
+
+ return (
+
+
+
+
+ {position === 'modal'
+ ? (
+
+
+
+ ) : (
+
+
+
+ )
+ }
+
+ )
+}
+
+export default Select
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
new file mode 100644
index 0000000..deac1a2
--- /dev/null
+++ b/src/components/Select/select.module.scss
@@ -0,0 +1,25 @@
+@import '../../scss/config.scss';
+
+.select {
+ svg {
+ @include position(r10px);
+
+ left: auto !important;
+ cursor: pointer;
+ }
+
+ input {
+ cursor: pointer;
+ padding-left: 10px !important;
+ padding-right: 40px;
+ }
+
+ &.disabled svg {
+ cursor: no-drop;
+ }
+}
+
+.popover {
+ padding: 0 !important;
+ border: 0 !important;
+}
diff --git a/src/components/Select/select.ts b/src/components/Select/select.ts
new file mode 100644
index 0000000..fbe6a5e
--- /dev/null
+++ b/src/components/Select/select.ts
@@ -0,0 +1,21 @@
+import type { PopoverPosition } from '../../utils/popover'
+
+import type { ListEventType, ListProps } from '../List/list'
+
+export type SelectProps = {
+ name: string
+ value?: string
+ placeholder?: string
+ label?: string
+ subText?: string
+ disabled?: boolean
+ position?: PopoverPosition | 'modal'
+} & ListProps
+
+export type SvelteSelectProps = {
+ onChange?: (event: ListEventType & { select: string }) => void
+} & SelectProps
+
+export type ReactSelectProps = {
+ onChange?: (event: ListEventType & { select: string }) => void
+} & SelectProps
diff --git a/src/components/Sheet/Sheet.astro b/src/components/Sheet/Sheet.astro
index 8d86743..2d76efe 100644
--- a/src/components/Sheet/Sheet.astro
+++ b/src/components/Sheet/Sheet.astro
@@ -3,9 +3,10 @@ import type { SheetProps } from './sheet'
import Modal from '../Modal/Modal.astro'
-import styles from './sheet.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './sheet.module.scss'
+
interface Props extends SheetProps {}
const {
diff --git a/src/components/Sheet/Sheet.svelte b/src/components/Sheet/Sheet.svelte
index cae5c3f..6f1ab0e 100644
--- a/src/components/Sheet/Sheet.svelte
+++ b/src/components/Sheet/Sheet.svelte
@@ -3,9 +3,10 @@
import Modal from '../Modal/Modal.svelte'
- import styles from './sheet.module.scss'
import { classNames } from '../../utils/classNames'
+ import styles from './sheet.module.scss'
+
export let position: SheetProps['position'] = null
export let className: SheetProps['className'] = ''
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
index 0cbe7d6..ca759e4 100644
--- a/src/components/Sheet/Sheet.tsx
+++ b/src/components/Sheet/Sheet.tsx
@@ -3,9 +3,10 @@ import type { ReactSheetProps } from './sheet'
import Modal from '../Modal/Modal.tsx'
-import styles from './sheet.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './sheet.module.scss'
+
const Sheet = ({
position,
className,
diff --git a/src/components/Slider/Slider.astro b/src/components/Slider/Slider.astro
index 1048353..1e6bc87 100644
--- a/src/components/Slider/Slider.astro
+++ b/src/components/Slider/Slider.astro
@@ -1,9 +1,10 @@
---
import type { SliderProps } from './slider'
-import styles from './slider.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './slider.module.scss'
+
interface Props extends SliderProps {}
const {
diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte
index a4b4bf0..a363cec 100644
--- a/src/components/Slider/Slider.svelte
+++ b/src/components/Slider/Slider.svelte
@@ -1,9 +1,10 @@
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index ce6db1c..6deba08 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,9 +1,10 @@
import React from 'react'
import type { SpinnerProps } from './spinner'
-import styles from './spinner.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './spinner.module.scss'
+
const Spinner = ({
color,
width,
@@ -15,13 +16,13 @@ const Spinner = ({
styles.spinner,
dashArray && styles.dashed
])
-
+
const stylesVariable = {
...(color && { '--w-spinner-color': color }),
...(width && { '--w-spinner-width': `${width}px;` }),
...(speed && { '--w-spinner-speed': `${speed}s;` }),
...(size && { '--w-spinner-size': `${size}px;` }),
- ...(dashArray && { '--w-spinner-dash': dashArray }),
+ ...(dashArray && { '--w-spinner-dash': dashArray })
} as React.CSSProperties
return (
diff --git a/src/components/Switch/Switch.astro b/src/components/Switch/Switch.astro
index 6995c66..729fcc2 100644
--- a/src/components/Switch/Switch.astro
+++ b/src/components/Switch/Switch.astro
@@ -1,9 +1,10 @@
---
import type { SwitchProps } from './switch'
-import styles from './switch.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './switch.module.scss'
+
interface Props extends SwitchProps {}
const {
diff --git a/src/components/Switch/Switch.svelte b/src/components/Switch/Switch.svelte
index 8f5938b..ddaa08f 100644
--- a/src/components/Switch/Switch.svelte
+++ b/src/components/Switch/Switch.svelte
@@ -1,9 +1,10 @@
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index d77e0a2..1412e4e 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -1,9 +1,10 @@
import React from 'react'
import type { ReactTimelineProps } from './timeline'
-import styles from './timeline.module.scss'
import { classNames } from '../../utils/classNames'
+import styles from './timeline.module.scss'
+
const Timeline = ({
theme,
counter,
@@ -25,7 +26,7 @@ const Timeline = ({
const styleVariables = {
...(color && { '--w-timeline-color': color }),
...(textColor && { '--w-timeline-text-color': textColor }),
- ...(counter && { '--w-timeline-counter': counter }),
+ ...(counter && { '--w-timeline-counter': counter })
} as React.CSSProperties
return (
diff --git a/src/components/TimelineItem/TimelineItem.svelte b/src/components/TimelineItem/TimelineItem.svelte
index a6e06c9..bb02391 100644
--- a/src/components/TimelineItem/TimelineItem.svelte
+++ b/src/components/TimelineItem/TimelineItem.svelte
@@ -1,9 +1,10 @@
diff --git a/src/pages/menu.astro b/src/pages/menu.astro
index 457add9..7a2ab20 100644
--- a/src/pages/menu.astro
+++ b/src/pages/menu.astro
@@ -1,18 +1,18 @@
---
-import Layout from '@static/Layout.astro'
import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
+
import Button from '@components/Button/Button.astro'
import Icon from '@components/Icon/Icon.astro'
-
import AstroMenu from '@components/Menu/Menu.astro'
import SvelteMenu from '@components/Menu/Menu.svelte'
import ReactMenu from '@components/Menu/Menu.tsx'
+import logo from '../../public/img/logo.svg?raw'
+
import { getSections } from '@helpers'
import { menu, menuLogo } from '@data'
-import logo from '../../public/img/logo.svg?raw'
-
const sections = getSections({
title: 'menus',
components: [AstroMenu, SvelteMenu, ReactMenu]
@@ -28,7 +28,7 @@ const sections = getSections({
logo={{ html: logo }}
className="backdrop"
/>
- {Array(3).fill(0).map(x => (
+ {Array(3).fill(0).map(_ => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
@@ -41,7 +41,7 @@ const sections = getSections({
logo={{ html: logo }}
className="backdrop"
/>
- {Array(3).fill(0).map(x => (
+ {Array(3).fill(0).map(_ => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
@@ -54,7 +54,7 @@ const sections = getSections({
logo={{ html: logo }}
className="backdrop"
/>
- {Array(3).fill(0).map(x => (
+ {Array(3).fill(0).map(_ => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
@@ -205,7 +205,7 @@ const sections = getSections({
.backdrop {
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.1);
-
+
ul {
padding-top: 40px;
}
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
index 5eefc05..870d659 100644
--- a/src/pages/modal.astro
+++ b/src/pages/modal.astro
@@ -1,6 +1,6 @@
---
-import Layout from '@static/Layout.astro'
import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
import Button from '@components/Button/Button.astro'
import AstroModal from '@components/Modal/Modal.astro'
@@ -220,7 +220,7 @@ const sections = getSections({
diff --git a/src/pages/popover.astro b/src/pages/popover.astro
index 1c08e9e..1831e9c 100644
--- a/src/pages/popover.astro
+++ b/src/pages/popover.astro
@@ -1,6 +1,6 @@
---
-import Layout from '@static/Layout.astro'
import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
import Button from '@components/Button/Button.astro'
import AstroPopover from '@components/Popover/Popover.astro'
@@ -38,7 +38,7 @@ const sections = getSections({
- This is a popover created with a React component.
+ This is a popover created with a React component. If you need to add interactive elements inside the popover in React, set the isInteractive prop to true.
@@ -207,7 +207,7 @@ const sections = getSections({
diff --git a/src/pages/sheet.astro b/src/pages/sheet.astro
index f6c4999..f0a438b 100644
--- a/src/pages/sheet.astro
+++ b/src/pages/sheet.astro
@@ -1,6 +1,6 @@
---
-import Layout from '@static/Layout.astro'
import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
import Button from '@components/Button/Button.astro'
import AstroSheet from '@components/Sheet/Sheet.astro'
@@ -204,7 +204,7 @@ const sections = getSections({
diff --git a/src/pages/slider.astro b/src/pages/slider.astro
index eba4f2d..6ea5530 100644
--- a/src/pages/slider.astro
+++ b/src/pages/slider.astro
@@ -1,6 +1,6 @@
---
-import Layout from '@static/Layout.astro'
import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
import AstroSlider from '@components/Slider/Slider.astro'
import SvelteSlider from '@components/Slider/Slider.svelte'
@@ -27,7 +27,7 @@ const sections = getSections({
-
+
@@ -38,11 +38,11 @@ const sections = getSections({
-
+
-
+
@@ -50,7 +50,7 @@ const sections = getSections({
min={0}
max={100}
step={20}
- value={20}
+ value={20}
/>
@@ -101,7 +101,7 @@ const sections = getSections({
@@ -84,6 +87,20 @@
{input}
+
+ {
+ // eslint-disable-next-line no-console
+ console.log(event)
+ }}
+ />
+
+
@@ -110,6 +127,20 @@
{radio}
+
+
+
strong {
color: #FF3E00;
}
-
+
.r > strong {
color: #61DAFB;
}
diff --git a/src/static/Examples.astro b/src/static/Examples.astro
index 126a085..af03368 100644
--- a/src/static/Examples.astro
+++ b/src/static/Examples.astro
@@ -5,16 +5,16 @@ import Badge from '@components/Badge/Badge.astro'
import Button from '@components/Button/Button.astro'
import Card from '@components/Card/Card.astro'
import Checkbox from '@components/Checkbox/Checkbox.astro'
-import Input from '@components/Input/Input.astro'
import Icon from '@components/Icon/Icon.astro'
+import Input from '@components/Input/Input.astro'
import Modal from '@components/Modal/Modal.astro'
import Progress from '@components/Progress/Progress.astro'
import Radio from '@components/Radio/Radio.astro'
import Rating from '@components/Rating/Rating.astro'
import Spinner from '@components/Spinner/Spinner.astro'
import Switch from '@components/Switch/Switch.astro'
-import Tabs from '@components/Tabs/Tabs.astro'
import Table from '@components/Table/Table.astro'
+import Tabs from '@components/Tabs/Tabs.astro'
import Timeline from '@components/Timeline/Timeline.astro'
import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
import Toast from '@components/Toast/Toast.astro'
@@ -33,7 +33,7 @@ const tabItems = [{
const radioItems = [
{ label: 'All messages', value: '1' },
{ label: 'Direct messages only', value: '2', selected: true },
- { label: 'No notifications', value: '3'},
+ { label: 'No notifications', value: '3' }
]
const tasks = [
@@ -87,7 +87,7 @@ const tasks = [
-
+
@@ -107,7 +107,7 @@ const tasks = [
Keep track of the SEO performance of your posts.
-
+
@@ -140,7 +140,7 @@ const tasks = [
@@ -148,7 +148,7 @@ const tasks = [
QA Engineer
-
+
Tasks
@@ -180,7 +180,7 @@ const tasks = [
@@ -294,11 +294,10 @@ const tasks = [