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>
+  )
+}