# ProfileCreated

Виджет для отображения успешного создания профиля пользователя.

## Описание

`ProfileCreated` - это компонент, который показывает email пользователя с аватаром (первая буква email) и сообщением об успешном создании профиля. Компонент включает зеленую галочку для визуального подтверждения успеха.

## Использование

```tsx
import { ProfileCreated } from '@/components/widgets/ProfileCreated';

function MyComponent() {
  return <ProfileCreated email="user@example.com" />;
}
```

## Props

| Prop  | Type   | Required | Description                          |
|-------|--------|----------|--------------------------------------|
| email | string | Да       | Email адрес для отображения          |

## Особенности

- **Аватар с первой буквой**: Автоматически извлекает первую букву email и преобразует в верхний регистр
- **Градиентный фон**: Использует градиент от голубого до индиго
- **Градиентная иконка**: Аватар имеет красивый градиент от синего к темно-синему
- **Иконка успеха**: Зеленая галочка справа для подтверждения действия
- **Адаптивный**: Использует `inline-flex` для гибкого размещения

## Дизайн

Компонент точно следует спецификации из Figma:
- Padding: 18px
- Border: 2px solid #BFDBFE
- Border radius: 16px
- Avatar size: 48px
- Gap между элементами: 20px (основной), 12px (профиль), 3px (внутри профиля)

## Стили шрифтов

- **Email**: Inter, 18px, font-weight: 600, color: #333
- **Текст успеха**: Inter, 14px, font-weight: 500, color: #2563EB (blue-600)
- **Буква в аватаре**: Inter, 20px, font-weight: 700, color: white

## Storybook

Для просмотра всех вариантов компонента запустите Storybook:

```bash
npm run storybook
```

Доступные stories:
- **Default**: Стандартный вид с примером email
- **AnotherEmail**: Пример с другим email
- **SingleLetter**: Email начинающийся с одной буквы
- **LongEmail**: Длинный email адрес
- **UppercaseEmail**: Email в верхнем регистре
- **NumberStartEmail**: Email начинающийся с цифры

## Figma

Дизайн компонента: [Figma Link](https://www.figma.com/design/kx7k6sswURrLwBeavffF9D/%D0%92%D0%BE%D1%80%D0%BE%D0%BD%D0%BA%D0%B0-%D0%9F%D0%BE%D1%80%D1%82%D1%80%D0%B5%D1%82?node-id=566-2752)

## Примечания

- Компонент не имеет внутренних состояний
- Не требует интеграции с другими системами
- Является чисто презентационным компонентом
- Использует только Tailwind CSS для стилизации
