connect/client/src/components/ContentDrawer.tsx

import { Drawer } from 'antd';
import { useEffect, useState } from 'react';
import { Avatar, Typography } from 'antd';
import { useTranslation } from 'react-i18next';

interface ContentDrawerProps {
  open: boolean;
  closeDrawer: () => void;
  children: React.ReactNode;
  type: 'create' | 'edit';
}

export default function ContentDrawer({
  open,
  closeDrawer,
  children,
  type,
}: ContentDrawerProps) {
  const { t } = useTranslation();
  const [width, setWidth] = useState<number | string>('30%');

  const calculateWidths = () => {
    const windowWidth = window.innerWidth;
    const expanded = Math.max(windowWidth * 0.3, 300);
    setWidth(expanded);
  };

  useEffect(() => {
    calculateWidths();
    window.addEventListener('resize', calculateWidths);
    return () => window.removeEventListener('resize', calculateWidths);
  }, []);

  const editDrawerTitle = (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 12,
      }}
    >
      <div
        onClick={closeDrawer}
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
          cursor: 'pointer',
        }}
      >
        <img
          src="./icons/drawer/arrow_back.svg"
          alt="close_drawer"
          style={{ height: '16px', width: '16px' }}
        />
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
        <Avatar
          src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
          size={40}
          style={{ flexShrink: 0 }}
        />
        <div>
          <Typography.Text strong style={{ display: 'block' }}>
            Александр Александров
          </Typography.Text>
          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
            alexandralex@vorkout.ru
          </Typography.Text>
        </div>
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
        }}
      >
        <img
          src="./icons/drawer/delete.svg"
          alt="delete"
          style={{ height: '18px', width: '16px' }}
        />
      </div>
    </div>
  );

  const createDrawerTitle = (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 12,
      }}
    >
      <div
        onClick={closeDrawer}
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
          cursor: 'pointer',
        }}
      >
        <img
          src="./icons/drawer/arrow_back.svg"
          alt="close_drawer"
          style={{ height: '16px', width: '16px' }}
        />
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          flex: 1,
          fontSize: '20px',
        }}
      >
        {t('newAccount')}
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
        }}
        onClick={closeDrawer}
      >
        <img
          src="./icons/drawer/delete.svg"
          alt="delete"
          style={{ height: '18px', width: '16px' }}
        />
      </div>
    </div>
  );

  return (
    <Drawer
      title={type === 'create' ? createDrawerTitle : editDrawerTitle}
      placement="right"
      open={open}
      width={width}
      destroyOnClose={true}
      closable={false}
    >
      {children}
    </Drawer>
  );
}