From 65e20202fb7d3cf48634bcce95ab85aca005dbb7 Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Tue, 29 Oct 2024 16:39:32 +0300 Subject: [PATCH] profile card --- package-lock.json | 37 +++++++++++++++++ package.json | 3 ++ src/components/index.ts | 1 + src/components/profile/index.ts | 1 + src/components/profile/profile.tsx | 66 ++++++++++++++++++++++++++++++ src/pages/by.tsx | 22 +++++++++- 6 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 src/components/index.ts create mode 100644 src/components/profile/index.ts create mode 100644 src/components/profile/profile.tsx diff --git a/package-lock.json b/package-lock.json index 95186b8..73f563e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@chakra-ui/react": "^2.10.3", "@eslint/js": "^9.11.0", "@stylistic/eslint-plugin": "^2.8.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "eslint": "^9.11.0", "eslint-plugin-react": "^7.36.1", "express": "^4.19.2", @@ -20,6 +22,7 @@ "lottie-react": "^2.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.23.1", "typescript-eslint": "^8.6.0" } @@ -2580,6 +2583,31 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "license": "MIT" }, + "node_modules/@types/prop-types": { + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", + "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.6.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz", @@ -8462,6 +8490,15 @@ } } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 2e1a338..ab5d75e 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "@chakra-ui/react": "^2.10.3", "@eslint/js": "^9.11.0", "@stylistic/eslint-plugin": "^2.8.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "eslint": "^9.11.0", "eslint-plugin-react": "^7.36.1", "express": "^4.19.2", @@ -27,6 +29,7 @@ "lottie-react": "^2.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.23.1", "typescript-eslint": "^8.6.0" } diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..f43a8fc --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1 @@ +export { Profile } from './profile' diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts new file mode 100644 index 0000000..f43a8fc --- /dev/null +++ b/src/components/profile/index.ts @@ -0,0 +1 @@ +export { Profile } from './profile' diff --git a/src/components/profile/profile.tsx b/src/components/profile/profile.tsx new file mode 100644 index 0000000..7129973 --- /dev/null +++ b/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 & { + name: string + avatar?: string + rated: number +} + +export const Profile = ({ user }: { user: User }) => { + const [rated, setRated] = useState(user.rated || 0) + return ( + + Данные профиля + + + + + + + Имя: {user.name.toUpperCase()} + + + + {Array.from({ length: 5 }).map((_, index) => + index + 1 > rated ? ( + setRated(index + 1)} + > + + + ) : ( + setRated(index + 1)} + > + + + ), + )} + + + + + 
{JSON.stringify(user, null, 4)}
+ + ) +} diff --git a/src/pages/by.tsx b/src/pages/by.tsx index f8bb3a8..b1d3130 100644 --- a/src/pages/by.tsx +++ b/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 ( - 
{JSON.stringify(params, null, 4)}
+ {user ? ( + + ) : ( + Пользователь не найден + )} ) }