hw8 styles

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css

@@ -19,7 +19,7 @@
     overflow: hidden;
     cursor: pointer;
     border-radius: 3px;
-    border: none;
+    border: 1px solid #0066CC;
     color: white;
     padding: 5px 24px;
     font-family: 'Montserrat', sans-serif;

src/s2-homeworks/hw08/HW8.module.css

@@ -1,7 +1,44 @@
 .item {
-    display: flex;
-    justify-content: space-between;
-    width: 200px;
-
-    margin-left: 10px;
+    height: 48px;
+    border-bottom: 1px solid #E5E5E5;;
 }
+
+.item:last-of-type {
+    border-bottom: none;
+}
+
+.users {
+    border-collapse: collapse;
+}
+
+.buttonsContainer {
+    display: flex;
+    gap: 12px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: max-content;
+    gap: 20px;
+}
+
+.thead {
+    padding-left: 17px;
+    background-color: #E5E5E5;
+    border: none;
+    height: 36px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.nameCol {
+    width: 297px;
+    padding-left: 17px;
+}
+
+.ageCol {
+    width: 284px;
+}

src/s2-homeworks/hw08/HW8.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { homeWorkReducer } from './bll/homeWorkReducer'
+import React, {useState} from 'react'
+import {homeWorkReducer} from './bll/homeWorkReducer'
 import s from './HW8.module.css'
 import s2 from '../../s1-main/App.module.css'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
@@ -14,49 +14,80 @@ export type UserType = {
 
 const initialPeople: UserType[] = [
     // студенты могут поменять имя/возраст/количество объектов, _id должны быть целочисленные
-    { _id: 0, name: 'Кот', age: 3 },
-    { _id: 1, name: 'Александр', age: 66 },
-    { _id: 2, name: 'Коля', age: 16 },
-    { _id: 3, name: 'Виктор', age: 44 },
-    { _id: 4, name: 'Дмитрий', age: 40 },
-    { _id: 5, name: 'Ирина', age: 55 },
+    {_id: 0, name: 'Кот', age: 3},
+    {_id: 1, name: 'Александр', age: 66},
+    {_id: 2, name: 'Коля', age: 16},
+    {_id: 3, name: 'Виктор', age: 44},
+    {_id: 4, name: 'Дмитрий', age: 40},
+    {_id: 5, name: 'Ирина', age: 55},
 ]
 
 const HW8 = () => {
     const [people, setPeople] = useState<UserType[]>(initialPeople) // need to fix any
-
+    const [currentSort, setCurrentSort] = useState('')
     // need to fix any
-    const finalPeople = people.map((u: UserType) => <User key={u._id} u={u} />)
+    const finalPeople = people.map((u: UserType) => <User key={u._id} u={u}/>)
 
-    const sortUp = () =>
+    const sortUp = () => {
         setPeople(
-            homeWorkReducer(initialPeople, { type: 'sort', payload: 'up' })
+            homeWorkReducer(initialPeople, {type: 'sort', payload: 'up'})
         ) // в алфавитном порядке a.name > b.name
-    const sortDown = () =>
+        setCurrentSort('up')
+    }
+
+    const sortDown = () => {
         setPeople(
-            homeWorkReducer(initialPeople, { type: 'sort', payload: 'down' })
-        ) // в обратном порядке a.name < b.name
-    const check18 = () =>
+            homeWorkReducer(initialPeople, {type: 'sort', payload: 'down'})
+        ) // в обратном порядке a.name < b.name}
+        setCurrentSort('down')
+    }
+    const check18 = () => {
         setPeople(
-            homeWorkReducer(initialPeople, { type: 'check', payload: 18 })
+            homeWorkReducer(initialPeople, {type: 'check', payload: 18})
         ) // совершеннолетние
+        setCurrentSort('18')
+    }
 
     return (
-        <div id={'hw3'} className={s2.hw}>
-            <div className={s2.hwTitle}>homeworks 8</div>
+        <div id={'hw3'}>
+            <div className={s2.hwTitle}>Homework #8</div>
+            <div className={s2.hw}>
+                <div className={s.container}>
+                    <div className={s.buttonsContainer}>
+                        <SuperButton
+                            id={'hw8-button-up'}
+                            onClick={sortUp}
+                            xType={currentSort === 'up' ? '' : 'secondary'}
+                        >
+                            Sort up
+                        </SuperButton>
+                        <SuperButton
+                            id={'hw8-button-down'}
+                            onClick={sortDown}
+                            xType={currentSort === 'down' ? '' : 'secondary'}
+                        >
+                            Sort down
+                        </SuperButton>
+                        <SuperButton
+                            id={'hw8-button-18'}
+                            onClick={check18}
+                            xType={currentSort === '18' ? '' : 'secondary'}
+                        >
+                            Check 18+
+                        </SuperButton>
+                    </div>
 
-            <div id={'hw8-users'}>{finalPeople}</div>
 
-            <div>
-                <SuperButton id={'hw8-button-up'} onClick={sortUp}>
-                    sort up
-                </SuperButton>
-                <SuperButton id={'hw8-button-down'} onClick={sortDown}>
-                    sort down
-                </SuperButton>
-                <SuperButton id={'hw8-button-18'} onClick={check18}>
-                    check 18
-                </SuperButton>
+                    <table id={'hw8-users'} className={s.users}>
+                        <thead className={s.thead}>
+                        <tr>
+                            <td className={s.nameCol}>Name</td>
+                            <td className={s.ageCol}>Age</td>
+                        </tr>
+                        </thead>
+                        <tbody>{finalPeople}</tbody>
+                    </table>
+                </div>
             </div>
         </div>
     )

src/s2-homeworks/hw08/User.tsx

@@ -9,10 +9,12 @@ type UserPropsType = {
 
 const User: React.FC<UserPropsType> = ({ u }) => {
     return (
-        <div id={'hw8-user-' + u._id + '-' + u.age} className={s.item}>
-            <span id={'hw8-user-name-' + u._id}>{u.name}</span>
-            <span id={'hw8-user-age-' + u._id}>{u.age}</span>
-        </div>
+        <tr id={'hw8-user-' + u._id + '-' + u.age} className={s.item}>
+            <td id={'hw8-user-name-' + u._id} className={s.nameCol}>
+                {u.name}
+            </td>
+            <td id={'hw8-user-age-' + u._id}>{u.age}</td>
+        </tr>
     )
 }