Widget | feat: add shared

import { FC } from 'react';

import { ActionButton } from '../buttons';

import * as Styled from './styled';

interface IBackGroup {

  title: string;

  handleBackClick: () => void;

  colorItem?: string;

}

export const BackGroup: FC<IBackGroup> = ({

  title,

  handleBackClick,

  colorItem,

}) => (

  <Styled.BackGroup>

    <ActionButton iconName="back" onClick={handleBackClick} />

    <Styled.Title $colorItem={colorItem}>{title}</Styled.Title>

  </Styled.BackGroup>

);

export * from './back-group';

import styled from 'styled-components';

import { devices } from '@/styles';

export const BackGroup = styled.div`

  display: flex;

  flex-direction: row;

  gap: 12px;

  align-items: center;

  min-height: 32px;

  @media ${devices.tablet} {

    gap: 16px;

  }

  @media ${devices.mobile} {

    gap: 12px;

  }

`;

export const Title = styled.h1<{ $colorItem?: string }>`

  display: -webkit-box;

  overflow: hidden;

  font-family: ${(props) => props.theme.fonts};

  font-size: 16px;

  font-weight: 800;

  line-height: 22px;

  color: ${(props) => props.$colorItem || 'var(--white)'};

  text-overflow: ellipsis;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  @media ${devices.tablet} {

    font-size: 18px;

    line-height: 26px;

  }

  @media ${devices.mobile} {

    font-size: 16px;

    line-height: 22px;

  }

`;

'use client';

import { FC } from 'react';

import * as Styled from './styled';

interface IACtionButtonProps {

  title: string;

  type: 'button' | 'submit';

  handleClick?: () => void;

  disabled?: boolean;

}

export const ActionAuthButton: FC<IACtionButtonProps> = ({

  title,

  type,

  handleClick,

  disabled = false,

}) => (

  <Styled.ActionButton disabled={disabled} type={type} onClick={handleClick}>

    {title}

  </Styled.ActionButton>

);

export * from './action-auth-button';