profile card

src/components/index.ts

@@ -0,0 +1 @@
+export { Profile } from './profile'

src/components/profile/index.ts

@@ -0,0 +1 @@
+export { Profile } from './profile'

src/components/profile/profile.tsx

@@ -0,0 +1,66 @@
+import {
+  Avatar,
+  Box,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  HStack,
+  Heading,
+  Icon,
+  Text,
+} from '@chakra-ui/react'
+import { FaRegStar, FaStar } from 'react-icons/fa6'
+
+import React, { useState } from 'react'
+
+type User = Record<string, unknown> & {
+  name: string
+  avatar?: string
+  rated: number
+}
+
+export const Profile = ({ user }: { user: User }) => {
+  const [rated, setRated] = useState(user.rated || 0)
+  return (
+    <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
+      <Heading as="h2">Данные профиля</Heading>
+      <Box m={3}>
+        <Card width={'fit-content'} shadow="2xl">
+          <CardHeader>
+            <Avatar size="xl" pt={1} src={user.avatar as string} />
+          </CardHeader>
+          <CardBody>
+            <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
+          </CardBody>
+          <CardFooter>
+            <HStack>
+              {Array.from({ length: 5 }).map((_, index) =>
+                index + 1 > rated ? (
+                  <Icon
+                    key={index}
+                    color="orange.400"
+                    cursor="pointer"
+                    onClick={() => setRated(index + 1)}
+                  >
+                    <FaRegStar />
+                  </Icon>
+                ) : (
+                  <Icon
+                    key={index}
+                    color="orange.400"
+                    cursor="pointer"
+                    onClick={() => setRated(index + 1)}
+                  >
+                    <FaStar />
+                  </Icon>
+                ),
+              )}
+            </HStack>
+          </CardFooter>
+        </Card>
+      </Box>
+      <pre>{JSON.stringify(user, null, 4)}</pre>
+    </Box>
+  )
+}

src/pages/by.tsx

@@ -1,13 +1,31 @@
-import { Container } from '@chakra-ui/react'
+import { Container, Heading } from '@chakra-ui/react'
 import React from 'react'
 import { useParams } from 'react-router-dom'
 
+import { Profile } from '../components'
+
+const users = {
+  'some-user-id': {
+    name: 'alexandr',
+    secondName: 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]
+
   return (
     <Container maxW="container.xl">
-      <pre>{JSON.stringify(params, null, 4)}</pre>
+      {user ? (
+        <Profile user={user} />
+      ) : (
+        <Heading as="h2">Пользователь не найден</Heading>
+      )}
     </Container>
   )
 }