profile card

2024-10-29 16:39:32 +03:00
parent 2971f2b90d
commit 65e20202fb
6 changed files with 128 additions and 2 deletions
@@ -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>
+  )
+}