+
= memo(({ classNa
onTabClick={onChangeTag}
value={tag}
/>
-
+
);
});
diff --git a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
index ab77527..d68c594 100644
--- a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
+++ b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
@@ -11,7 +11,10 @@ import {
getArticlesListView,
initArticlesList,
ArticlesList,
+ ArticlesListFilters,
} from 'features/ArticlesList';
+import { VStack } from 'shared/ui/Stack';
+import { PageWrapper } from 'widgets/PageWrapper';
interface ArticlesPageProps {
className?: string;
@@ -23,6 +26,7 @@ const reducers: ReducersList = {
const ArticlesPage: FC
= ({ className }) => {
const dispatch = useAppDispatch();
+ const isVirtualized = false;
const articles = useAppSelector(getArticlesList.selectAll);
const isLoading = useAppSelector(getArticlesListIsLoading);
@@ -39,14 +43,32 @@ const ArticlesPage: FC = ({ className }) => {
return (
-
+ {isVirtualized ? (
+
+ ) : (
+
+
+
+
+
+
+ )}
);
};
diff --git a/src/shared/ui/ListBox/ListBox.module.scss b/src/shared/ui/ListBox/ListBox.module.scss
new file mode 100644
index 0000000..9f9663d
--- /dev/null
+++ b/src/shared/ui/ListBox/ListBox.module.scss
@@ -0,0 +1,37 @@
+.ListBox {
+ position: relative;
+}
+
+.trigger {
+ background: none;
+ margin: 0;
+ padding: 0;
+ outline: none;
+ border: none;
+}
+
+.options {
+ position: absolute;
+ background: var(--list-box-bg);
+ border-radius: 0 0 12px 12px;
+ z-index: 20;
+ width: 100%;
+ max-width: fit-content;
+
+ &:active {
+ outline: none;
+ }
+}
+
+.option {
+ padding: 10px 20px;
+ cursor: pointer;
+}
+
+.active {
+ background: var(--inverted-primary-color);
+}
+
+.disabled {
+ opacity: .5;
+}
\ No newline at end of file
diff --git a/src/shared/ui/ListBox/ListBox.stories.tsx b/src/shared/ui/ListBox/ListBox.stories.tsx
new file mode 100644
index 0000000..d36583a
--- /dev/null
+++ b/src/shared/ui/ListBox/ListBox.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListBox } from './ListBox';
+
+const meta: Meta = {
+ title: 'shared/ListBox',
+ component: ListBox,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Root: Story = {
+ args: {
+ options: [
+ {
+ content: 'First option label',
+ value: 'First option value',
+ },
+ {
+ content: 'Second option label',
+ value: 'Second option value',
+ },
+ {
+ content: 'Third option label',
+ value: 'Third option value',
+ },
+ ],
+ },
+};
+
+export const WithDisabledOption: Story = {
+ args: {
+ options: [
+ {
+ content: 'First label',
+ value: 'First value',
+ },
+ {
+ content: 'Second label',
+ value: 'Second value',
+ disabled: true,
+ },
+ {
+ content: 'Third label',
+ value: 'Third value',
+ },
+ ],
+ },
+};
diff --git a/src/shared/ui/ListBox/ListBox.tsx b/src/shared/ui/ListBox/ListBox.tsx
new file mode 100644
index 0000000..37c2526
--- /dev/null
+++ b/src/shared/ui/ListBox/ListBox.tsx
@@ -0,0 +1,68 @@
+import { Fragment, ReactElement, ReactNode, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Listbox } from '@headlessui/react';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
+import { Button } from '../Button';
+import cls from './ListBox.module.scss';
+
+export interface ListBoxOption {
+ content: ReactNode;
+ value: T;
+ disabled?: boolean;
+}
+
+interface ListBoxProps {
+ className?: string;
+ options: ListBoxOption[];
+ value?: T;
+ onChange?: (value: T) => void;
+ readonly?: boolean;
+}
+
+export const ListBox = (props: ListBoxProps): ReactElement> => {
+ const { t } = useTranslation('translation');
+ const { className, options, value, onChange, readonly } = props;
+
+ const defaultLabel = options.find((o) => o.value === value) || { content: t('select-value'), value: '' as T };
+ const [selectedValue, setSelectedValue] = useState>(defaultLabel);
+
+ const onChangeHandler = useCallback((option: ListBoxOption) => {
+ setSelectedValue(option);
+ onChange?.(option.value);
+ }, [onChange]);
+
+ return (
+
+
+
+
+
+ {options.map((option, index) => (
+
+ {({ active, selected, disabled }) => {
+ const mods: Mods = {
+ [cls.active]: active,
+ [cls.selected]: selected,
+ [cls.disabled]: disabled,
+ };
+
+ return (
+
+ {option.content}
+
+ );
+ }}
+
+ ))}
+
+
+ );
+};
diff --git a/src/shared/ui/ListBox/index.ts b/src/shared/ui/ListBox/index.ts
new file mode 100644
index 0000000..5b6769c
--- /dev/null
+++ b/src/shared/ui/ListBox/index.ts
@@ -0,0 +1 @@
+export { ListBox } from './ListBox';