{
title={t('There was an error')}
align={TextAlign.CENTER}
/>
-
+
);
}
const onKeyPress = (event: React.KeyboardEvent) => {
@@ -84,69 +89,63 @@ export const ProfileCard = (props: ProfileCardProps) => {
};
return (
-
+
{canEdit && (
-
+
{readOnly ? (
) : (
- <>
+
-
+
)}
)}
-
);
};
diff --git a/src/shared/ui/Stack/Flex/Flex.module.scss b/src/shared/ui/Stack/Flex/Flex.module.scss
new file mode 100644
index 00000000..b5eacb0c
--- /dev/null
+++ b/src/shared/ui/Stack/Flex/Flex.module.scss
@@ -0,0 +1,63 @@
+.Flex {
+ display: flex;
+}
+
+.justifyStart {
+ justify-content: flex-start;
+}
+
+.justifyCenter {
+ justify-content: center;
+}
+
+.justifyEnd {
+ justify-content: flex-end;
+}
+
+.justifyBetween {
+ justify-content: space-between;
+}
+
+.alignStart {
+ align-items: flex-start;
+}
+
+.alignCenter {
+ align-items: center;
+}
+
+.alignEnd {
+ align-items: flex-end;
+}
+
+.directionRow {
+ flex-direction: row;
+}
+
+.directionColumn {
+ flex-direction: column;
+}
+
+.gap4 {
+ gap: 4px;
+}
+
+.gap8 {
+ gap: 8px;
+}
+
+.gap10 {
+ gap: 10px;
+}
+
+.gap12 {
+ gap: 12px;
+}
+
+.gap16 {
+ gap: 16px;
+}
+
+.max {
+ width: 100%;
+}
diff --git a/src/shared/ui/Stack/Flex/Flex.stories.tsx b/src/shared/ui/Stack/Flex/Flex.stories.tsx
new file mode 100644
index 00000000..7a374e7d
--- /dev/null
+++ b/src/shared/ui/Stack/Flex/Flex.stories.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable i18next/no-literal-string */
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Flex } from './Flex';
+
+export default {
+ title: 'shared/Flex',
+ component: Flex,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} as ComponentMeta
;
+
+const Template: ComponentStory = (args) => ;
+
+export const Row = Template.bind({});
+Row.args = {
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
+
+export const RowGap4 = Template.bind({});
+RowGap4.args = {
+ gap: '4',
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
+
+export const RowGap16 = Template.bind({});
+RowGap16.args = {
+ gap: '16',
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
+
+export const Column = Template.bind({});
+Column.args = {
+ direction: 'column',
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
+
+export const ColumnGap4 = Template.bind({});
+ColumnGap4.args = {
+ direction: 'column',
+ gap: '4',
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
+
+export const ColumnGap16 = Template.bind({});
+ColumnGap16.args = {
+ direction: 'column',
+ gap: '16',
+ children: (
+ <>
+ flex
+ flex
+ flex
+ flex
+
+ ),
+};
diff --git a/src/shared/ui/Stack/Flex/Flex.tsx b/src/shared/ui/Stack/Flex/Flex.tsx
new file mode 100644
index 00000000..cab93d49
--- /dev/null
+++ b/src/shared/ui/Stack/Flex/Flex.tsx
@@ -0,0 +1,76 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import { ReactNode } from 'react';
+import cls from './Flex.module.scss';
+
+export type FlexJustify = 'start' | 'center' | 'end' | 'between';
+export type FlexAlign = 'start' | 'center' | 'end';
+export type FlexDirection = 'row' | 'column';
+export type FlexGap = '4' | '8' | '10' | '12' | '16';
+
+const justifyClasses: Record = {
+ start: cls.justifyStart,
+ between: cls.justifyBetween,
+ center: cls.justifyCenter,
+ end: cls.justifyCenter,
+};
+
+const alignClasses: Record = {
+ start: cls.alignStart,
+ center: cls.alignCenter,
+ end: cls.alignCenter,
+};
+
+const directionClasses: Record = {
+ row: cls.directionRow,
+ column: cls.directionColumn,
+};
+
+const gapClasses: Record = {
+ 4: cls.gap4,
+ 8: cls.gap8,
+ 10: cls.gap10,
+ 12: cls.gap12,
+ 16: cls.gap16,
+};
+
+export interface FlexProps {
+ className?: string;
+ children: ReactNode;
+ justify?: FlexJustify;
+ align?: FlexAlign;
+ direction: FlexDirection;
+ gap?: FlexGap;
+ component?: keyof JSX.IntrinsicElements;
+ max?: boolean;
+}
+
+export const Flex = ({
+ className,
+ children,
+ justify = 'start',
+ align = 'center',
+ direction = 'row',
+ gap = '8',
+ component = 'div',
+ max,
+}: FlexProps) => {
+ const classes = [
+ className,
+ justifyClasses[justify],
+ alignClasses[align],
+ directionClasses[direction],
+ gap && gapClasses[gap],
+ ];
+
+ const mods = {
+ [cls.max]: max,
+ };
+
+ const ComponentWrapper = component;
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/shared/ui/Stack/HStack/HStack.tsx b/src/shared/ui/Stack/HStack/HStack.tsx
new file mode 100644
index 00000000..a6b21ce8
--- /dev/null
+++ b/src/shared/ui/Stack/HStack/HStack.tsx
@@ -0,0 +1,7 @@
+import { Flex, FlexProps } from '../Flex/Flex';
+
+type HStackProps = Omit;
+
+export const HStack = (props: HStackProps) => (
+
+);
diff --git a/src/shared/ui/Stack/VStack/VStack.tsx b/src/shared/ui/Stack/VStack/VStack.tsx
new file mode 100644
index 00000000..fa6488f5
--- /dev/null
+++ b/src/shared/ui/Stack/VStack/VStack.tsx
@@ -0,0 +1,7 @@
+import { Flex, FlexProps } from '../Flex/Flex';
+
+type VStackProps = Omit;
+
+export const VStack = ({ align = 'start', ...props }: VStackProps) => (
+
+);
diff --git a/src/shared/ui/Stack/index.ts b/src/shared/ui/Stack/index.ts
new file mode 100644
index 00000000..b20bde75
--- /dev/null
+++ b/src/shared/ui/Stack/index.ts
@@ -0,0 +1,2 @@
+export { HStack } from './HStack/HStack';
+export { VStack } from './VStack/VStack';
diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.module.scss b/src/widgets/Sidebar/ui/Sidebar/Sidebar.module.scss
index 67d53d37..b56fd28e 100644
--- a/src/widgets/Sidebar/ui/Sidebar/Sidebar.module.scss
+++ b/src/widgets/Sidebar/ui/Sidebar/Sidebar.module.scss
@@ -5,6 +5,7 @@
position: relative;
transition: width 0.2s;
flex-shrink: 0;
+ padding-left: 30px;
}
.switchers {
@@ -26,15 +27,9 @@
z-index: 1000;
}
-.items {
- margin-top: 20px;
- margin-left: 30px;
- display: flex;
- flex-direction: column;
-}
-
.collapsed {
width: var(--sidebar-width-collapsed);
+ padding-left: 0;
.switchers {
flex-direction: column;
diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
index 6a7e4b7b..7d7fbb01 100644
--- a/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
+++ b/src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx
@@ -4,6 +4,7 @@ import { ThemeSwitcher } from 'shared/ui/ThemeSwitcher/ThemeSwitcher';
import { LangSwitcher } from 'shared/ui/LangSwitcher/LangSwitcher';
import { Button, ButtonSize, ButtonVariant } from 'shared/ui/Button/Button';
import { useSelector } from 'react-redux';
+import { VStack } from 'shared/ui/Stack';
import { getSiderbarItems } from '../../model/selecotrs/getSidebarItems';
import cls from './Sidebar.module.scss';
import { SidebarItem } from '../SidebarItem/SidebarItem';
@@ -42,7 +43,9 @@ export const Sidebar = memo(({ className }: SidebarProps) => {
className,
])}
>
- {itemList}
+
+ {itemList}
+