create grade-stars (#153)

daniilminin1990 · May 27, 2024 · c59be6f · c59be6f
1 parent db11e8c
commit c59be6f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/TableComponent/SingleRowCard/SingleRowCard.tsx b/src/components/TableComponent/SingleRowCard/SingleRowCard.tsx
@@ -1,6 +1,8 @@
 import { Fragment, useState } from 'react'
 
 import Edit2Outline from '@/assets/icons/svg/Edit2Outline'
+import Star from '@/assets/icons/svg/Star'
+import StarOutline from '@/assets/icons/svg/StarOutline'
 import TrashOutline from '@/assets/icons/svg/TrashOutline'
 import { ModalDeleteCard } from '@/components/ModalsForTable/ModalDeleteCard'
 import { ModalAddEditCard } from '@/components/ModalsForTable/ModalEditCard/ModalAddEditCard'
@@ -47,8 +49,15 @@ export const SingleRowCard = ({ item }: Props) => {
           </Typography>
         </Table.Cell>
         <Table.Cell>{updatedAr}</Table.Cell>
-        {/* Тут показать звездочки с заполнением*/}
-        <Table.Cell>{item.grade}</Table.Cell>
+        <Table.Cell className={s.grade}>
+          {[...Array(5)].map((_, index) =>
+            index < item.grade ? (
+              <Star className={s.star} key={index} />
+            ) : (
+              <StarOutline className={s.star} key={index} />
+            )
+          )}
+        </Table.Cell>
         <Table.Cell>
           {/*  Тут нужно будет добавить проверку на МОИ cards или не мои. Если мои то показать кнопки, если не мои то нихера */}
           {/*{card.userId === authorId ? (*/}

diff --git a/src/components/TableComponent/tableSingleRow.module.scss b/src/components/TableComponent/tableSingleRow.module.scss
@@ -99,24 +99,36 @@
 
 .imgWrapper {
   display: flex;
-  justify-content: start;
   gap: 10px;
   align-items: center;
+  justify-content: start;
+
   text-decoration: none;
 }
-.disabledCell {
-  //cursor: not-allowed;
-}
 
 .coverImg {
   width: 118px;
   height: 48px;
   object-fit: cover;
-  //object-fit: contain;
   object-position: 0 0;
 }
 
-// Region
+.grade {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 10px;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  .star {
+    width: 16px;
+    height: 16px;
+    color: var(--color-warning-300);
+  }
+}
+
 .nameBlock {
   display: flex;
   flex-flow: row nowrap;