Added sign out button to user page

front/src/components/BackHeader.tsx

@@ -2,22 +2,24 @@ import { Link } from 'react-router-dom'
 import { Navbar } from 'react-bootstrap'
 
 import BackButton from '../assets/backArrow.svg'
+import { PropsWithChildren } from 'react'
 
 type BackHeaderProps = {
     text: string
 }
 
-function BackHeader({ text }: BackHeaderProps) {
+function BackHeader({ text, children }: PropsWithChildren<BackHeaderProps>) {
     return (
         <Navbar>
             <Navbar.Brand as={Link} to='/'>
-                <img src={BackButton} alt='Go back' />
+                <img src={BackButton} alt='Назад' />
             </Navbar.Brand>
             <Navbar.Text className='me-auto'>
                 <h4 className='mb-0'>
                     {text}
                 </h4>
             </Navbar.Text>
+            {children}
         </Navbar>
     )
 }

front/src/components/Points.tsx

@@ -3,7 +3,7 @@ import { CSSProperties } from 'react'
 import handStarsIcon from '../assets/handStars.svg'
 
 type PointsProps = {
-    points?: number
+    points: number
 }
 
 const styles = {
@@ -16,6 +16,7 @@ const styles = {
     icon: {
         height: 24,
         paddingBottom: 5,
+        marginRight: 5,
     } as CSSProperties,
 }
 
@@ -23,8 +24,14 @@ function Points({ points }: PointsProps) {
     return (
         <div style={styles.container}>
             <h5>
-                Набрано очков: 
-                <span style={styles.points}><img style={styles.icon} src={handStarsIcon} alt='Hand giving stars icon' /> {points}</span>
+                Набрано очков:
+                <span style={styles.points}>
+                    <img
+                        style={styles.icon}
+                        src={handStarsIcon}
+                        alt='Иконка руки, дающей звёзды' />
+                    {points}
+                </span>
             </h5>
         </div>
     )

front/src/components/SignOut.tsx

@@ -0,0 +1,22 @@
+import { Navbar } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { CSSProperties } from 'react'
+
+import { clearToken } from '../utils/auth'
+
+import signOutIcon from '../assets/signOut.svg'
+
+const styles = {
+    rightIcon: {
+        marginLeft: '1rem',
+        marginRight: 0
+    } as CSSProperties,
+}
+
+const SignOut = () => (
+    <Navbar.Brand style={styles.rightIcon} as={Link} to='/'>
+        <img onClick={clearToken} src={signOutIcon} alt='Выйти' />
+    </Navbar.Brand>
+)
+
+export default SignOut

front/src/components/index.ts

@@ -11,3 +11,4 @@ export { default as BackHeader } from './BackHeader'
 export { default as CategoryPreview } from './CategoryPreview'
 export { default as StoriesPreview } from './StoriesPreview'
 export { default as Points } from './Points'
+export { default as SignOut } from './SignOut'