feat: create practice 2 (#12)

Author: furtivite

src/app/i18n/translation.ts

@@ -46,6 +46,10 @@ export const resources = {
       modal: {
         close: 'Close modal window',
       },
+      collapse: {
+        isClosed: 'Show more',
+        isOpened: 'Hide',
+      },
     },
   },
   ru: {
@@ -95,6 +99,10 @@ export const resources = {
       modal: {
         close: 'Закрыть модальное окно',
       },
+      collapse: {
+        isClosed: 'Показать больше',
+        isOpened: 'Скрыть',
+      },
     },
   },
 };

src/shared/Collapse/Collapse.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { ICollapse } from './interfaces';
+import { Btn } from '../Btns';
+
+export const Collapse: React.FC<ICollapse> = ({ children, showenText }) => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [isCollapseOpen, setIsCollapseOpen] = React.useState<boolean>(false);
+  const { t } = useTranslation();
+
+  // Хендлер для смены состояния открытости
+  const handleToggle = (): void => {
+    setIsCollapseOpen((prev) => !prev);
+  };
+
+  // Эффект для измерения высоты содержимого при значении флага isCollapseOpen === true
+  React.useLayoutEffect(() => {
+    if (isCollapseOpen && contentRef.current) {
+      const newHeight = contentRef.current.scrollHeight;
+      setContentHeight(newHeight);
+    }
+  }, [isCollapseOpen]);
+
+  const contentClassNames = clsx(isCollapseOpen ? 'opacity-1 mt-8' : 'opacity-0');
+
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <p>{showenText}</p>
+        <Btn onClick={handleToggle}>{isCollapseOpen ? t('collapse.isOpened') : t('collapse.isClosed')}</Btn>
+      </div>
+      <div className={contentClassNames} style={{ height: isCollapseOpen ? `${contentHeight}px` : 0 }}>
+        {children}
+      </div>
+    </div>
+  );
+};

src/shared/Collapse/interfaces.ts

@@ -0,0 +1,4 @@
+export interface ICollapse {
+  children: React.ReactNode;
+  showenText: string;
+}

src/shared/index.ts

@@ -1,4 +1,5 @@
 export * from './Btns';
+export { Collapse } from './Collapse/Collapse';
 export { Counter } from './Counter/Counter';
 export { Input } from './Input/Input';
 export { Logo } from './Logo/Logo';

src/shared/interfaces.ts

@@ -1,4 +1,5 @@
 export * from './Btns/interfaces';
+export * from './Collapse/interfaces';
 export * from './Counter/interfaces';
 export * from './Logo/interfaces';
 export * from './RangeSlider/interfaces';

src/stories/Collapse.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/react';
+import { Collapse } from '../shared';
+
+const meta: Meta<typeof Collapse> = {
+  title: 'UI/Collapse',
+  component: Collapse,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Closed = {
+  args: {
+    showenText: 'Some text...',
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum metus at felis eleifend, at ornare lacus scelerisque. Praesent arcu mi, suscipit eu rhoncus ut, finibus a elit. Nulla finibus nisi orci. Sed vestibulum lectus ac semper porta. Proin et pharetra ipsum. Nulla vitae sem ut libero bibendum ultrices sit amet varius ipsum. Phasellus et ultrices orci. Nam pretium, erat ut ornare porta, nunc nulla vulputate dolor, ut hendrerit justo massa sed lorem. ',
+  },
+};