right-panel.tsx

Overview

right-panel.tsx defines a React functional component named LoginRightPanel that renders the right-side panel of a login page or screen. Its primary purpose is to provide a visually appealing and informative section including a star icon, a localized title and description, user avatars, and a review rating with stars and text.

This component leverages Ant Design UI components (Typography, Rate, Space, Flex), a custom SvgIcon component for SVG rendering, and a localized translation hook (useTranslate). Styling is applied through CSS modules imported as styles.

The panel is designed to complement the login UI by providing branding elements, a motivational or descriptive message, and social proof through user ratings and avatars.

Component Details

LoginRightPanel

A React functional component representing the right panel in the login page.

Usage

import LoginRightPanel from './right-panel';

function LoginPage() {
  return (
    <div className="login-page">
      {/* other components */}
      <LoginRightPanel />
    </div>
  );
}

Props

• This component does not accept any props.

Returns

• JSX element rendering the right panel section with icons, text, avatars, and rating.

Internal Behavior and Implementation Details

• Localization: Uses useTranslate('login') hook to fetch localized strings for:

  • title

  • description

  • review

• SVG Icons:

  • Renders a star icon using a generic SvgIcon component with the name "login-star" and a fixed width.

  • Displays user avatars imported as an SVG React component from assets (login-avatars.svg).

• Layout:

  • Uses Flex components from Ant Design for flexible vertical and horizontal layout with controlled spacing (gap).

  • The container section applies CSS module styles (styles.rightPanel).

• Typography:

  • Title uses Ant Design's Typography.Title at level 1 with white-colored and custom styling.

  • Description and review text use Typography.Text with pink color styling.

• Rating:

  • Displays a disabled 5-star rating with Ant Design's Rate component, always showing a full 5-star value.

  • Shows a numeric rating "5.0" alongside stars.

  • Includes a localized textual review label below the rating.

Integration and Interaction

• With Localization System:
  The component depends on a translation hook (useTranslate('login')), which implies the presence of a localization framework in the application. It fetches text keys from the login namespace.

• With SVG and Icon System:
  Utilizes a custom SvgIcon component to render named SVG assets dynamically and directly imports SVGs as React components.

• Styling and Theming:
  Uses CSS modules (index.less) scoped to this component for consistent styling, including colors and layout.

• UI Framework Dependency:
  Built on top of Ant Design components for layout (Flex, Space), typography (Typography), and rating (Rate).

File Structure Summary

• Imports:

  • React SVG component for avatars.

  • Custom SVG icon component.

  • Ant Design UI components.

  • classnames utility for conditionally combining CSS classes.

  • Localization hook.

  • CSS module styles.

• Component:

  • LoginRightPanel functional component returning JSX.

• Export:

  • Default export of LoginRightPanel.

Visual Diagram

componentDiagram
    LoginRightPanel --> SvgIcon : renders "login-star"
    LoginRightPanel --> Avatars : renders user avatars SVG
    LoginRightPanel --> Typography.Title : renders localized title
    LoginRightPanel --> Typography.Text : renders localized description and review
    LoginRightPanel --> Rate : renders 5-star rating (disabled)
    LoginRightPanel --> useTranslate : fetches localized strings
    LoginRightPanel --> styles : applies CSS module styles

Summary

right-panel.tsx provides a neatly organized, localized, and styled right panel for a login page, featuring branding icons, user avatars, and a star rating system. It integrates smoothly with localization hooks and Ant Design components, ensuring consistency in UI and UX. The component is self-contained and reusable within any login-related UI context.

Appendix: Key Code Snippets

• Localization:

const { t } = useTranslate('login');
// Usage:
t('title'), t('description'), t('review')

• Star Icon:

<SvgIcon name="login-star" width={80} />

• Rating Section:

<Flex align="center" gap={16}>
  <Avatars />
  <Flex vertical>
    <Space>
      <Rate disabled defaultValue={5} />
      <span className={classNames(styles.white, styles.loginRateNumber)}>5.0</span>
    </Space>
    <span className={classNames(styles.pink, styles.loginRateReviews)}>{t('review')}</span>
  </Flex>
</Flex>

If further integration or extension is needed, this component can be easily adapted by passing props, adjusting translations, or modifying styles in the corresponding CSS module.