add locales

src/components/profile/profile.tsx

@@ -1,37 +1,70 @@
 import {
   Avatar,
   Box,
+  Button,
   Card,
   CardBody,
   CardFooter,
   CardHeader,
+  Center,
   HStack,
   Heading,
   Icon,
+  Input,
   Text,
+  VStack,
 } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
 import { FaRegStar, FaStar } from 'react-icons/fa6'
+import { Link, generatePath } from 'react-router-dom'
+import React, { memo, useCallback, useState } from 'react'
 
-import React, { useState } from 'react'
+import { URLs } from '../../__data__/urls'
 
 type User = Record<string, unknown> & {
+  id: string
   name: string
   avatar?: string
   rated: number
+  friends?: User[]
 }
 
-export const Profile = ({ user }: { user: User }) => {
+export const Profile = ({
+  user,
+  isLink,
+  title,
+}: {
+  user: User
+  isLink?: boolean
+  title?: string
+}) => {
   const [rated, setRated] = useState(user.rated || 0)
+  const [isTrue, setTrue] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSubmit = useCallback(() => {
+    fetch('/#')
+  }, [])
+
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
-      <Heading as="h2">Данные профиля</Heading>
+      <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
           <CardHeader>
-            <Avatar size="xl" pt={1} src={user.avatar as string} />
+            <Center>
+              <Avatar size="xl" pt={1} src={user.avatar as string} />
+            </Center>
           </CardHeader>
           <CardBody>
-            <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
+            {isLink ? (
+              <Link to={generatePath(URLs.by.url, { userId: user.id })}>
+                Имя: {user.name.toUpperCase()}
+                {t('key.to.override', { name: user.name.toUpperCase() })}
+              </Link>
+            ) : (
+              <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
+            )}
           </CardBody>
           <CardFooter>
             <HStack>
@@ -54,13 +87,80 @@ export const Profile = ({ user }: { user: User }) => {
                   >
                     <FaStar />
                   </Icon>
-                ),
+                )
               )}
             </HStack>
           </CardFooter>
         </Card>
+        {!isLink && <Form initialState="" onSubmit={handleSubmit} />}
+        <Box mt={3}>
+          {user.friends &&
+            user.friends.map((friend) => (
+              <Profile title="Друг" key={user.id} user={friend} isLink />
+            ))}
+        </Box>
       </Box>
-      <pre>{JSON.stringify(user, null, 4)}</pre>
+      {!isLink && (
+        <Box mt={3}>{isTrue ? <Counter key={1} /> : <Counter key={2} />}</Box>
+      )}
+      <Button onClick={() => setTrue(!isTrue)}>Switch</Button>
     </Box>
   )
 }
+
+const Form = memo<{ initialState: string; onSubmit(value: string): void }>(
+  ({ initialState, onSubmit }) => {
+    const [message, setMessage] = useState(initialState)
+
+    const handleMessageChange = (event) => {
+      setMessage(event.target.value)
+    }
+
+    return (
+      <Box mt={3} mb={3}>
+        <Text fontWeight="bold">Написать сообщение:</Text>
+
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            onSubmit(message)
+          }}
+        >
+          <Box
+            bg="gray.100"
+            p={4}
+            borderRadius={3}
+            borderWidth={1}
+            mt={3}
+            mb={3}
+            rounded="md"
+          >
+            <label htmlFor="message">Сообщение:</label>
+            <Input
+              placeholder="Отпавим весточку?"
+              value={message}
+              onChange={handleMessageChange}
+              id="message"
+            />
+          </Box>
+          <Button type="submit">Отправить</Button>
+        </form>
+      </Box>
+    )
+  },
+)
+
+Form.displayName = 'FormMemo'
+
+const Counter = () => {
+  const [value, setValue] = useState(0)
+
+  return (
+    <VStack>
+      <Heading>{value}</Heading>
+
+      <Button onClick={() => setValue(value + 1)}>+</Button>
+      <Button onClick={() => setValue(value - 1)}>-</Button>
+    </VStack>
+  )
+}

src/dashboard.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
+import { Container } from '@chakra-ui/react'
 
 import { URLs } from './__data__/urls'
 
@@ -13,7 +14,7 @@ export const Dashboard = () => {
         path={URLs.baseUrl}
         element={<Navigate replace to={URLs.toNotFound.url} />}
       />
-      <Route path={URLs.by.url} element={<ByPage />} />
+      <Route path={URLs.by.url} element={<Container maxW="container.xl"><ByPage /></Container>} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   )

src/index.tsx

@@ -2,6 +2,11 @@
 /* eslint-disable react/display-name */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { i18nextReactInitConfig } from '@brojs/cli'
+import i18next from 'i18next'
+
+i18next.t = i18next.t.bind(i18next)
+const config = i18nextReactInitConfig(i18next)
   
 import App from './app'
   
@@ -9,7 +14,8 @@ export default () => <App/>
   
 let rootElement: ReactDOM.Root
   
-export const mount = (Сomponent, element = document.getElementById('app')) => {
+export const mount = async (Сomponent, element = document.getElementById('app')) => {
+  await config
   rootElement = ReactDOM.createRoot(element)
   rootElement.render(<Сomponent/>)
 

src/pages/by.tsx

@@ -1,31 +1,56 @@
 import { Container, Heading } from '@chakra-ui/react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Profile } from '../components'
 
 const users = {
   'some-user-id': {
+    id: 'some-user-id',
     name: 'alexandr',
-    secondName: null,
+    surname: null,
     email: null,
     rated: 3,
-    avatar: 'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash'
-  }
+    avatar:
+      'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash',
+    friends: [
+      {
+        id: '2',
+        name: 'not alexandr',
+        surname: null,
+        email: null,
+        rated: 2,
+        avatar: 'https://www.gravatar.com/avatar/6e?d=robohash',
+      },
+    ],
+  },
+  '2': {
+    id: '2',
+    name: 'not alexandr',
+    surname: null,
+    email: null,
+    rated: 2,
+    avatar: 'https://www.gravatar.com/avatar/6e?d=robohash',
+    friends: [
+      {
+        id: 'some-user-id',
+        name: 'alexandr',
+        surname: null,
+        email: null,
+        rated: 3,
+        avatar:
+          'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash',
+      },
+    ],
+  },
 }
 
 export const ByPage = () => {
   const params = useParams()
 
-  const user = users[params.userId]
+  if (!users[params.userId]) {
+    return <Heading as="h2">Пользователь не найден</Heading>
+  }
 
-  return (
-    <Container maxW="container.xl">
-      {user ? (
-        <Profile user={user} />
-      ) : (
-        <Heading as="h2">Пользователь не найден</Heading>
-      )}
-    </Container>
-  )
+  return <Profile key={users[params.userId].id} user={users[params.userId]} />
 }