shelf details UI

src/components/shelf-details/ShelfDetails.module.scss

@@ -399,4 +399,40 @@
             }
         }
     }
+}
+
+.tabSegment {
+    margin: 0rem 0 3rem;
+    text-align: center;
+
+    button {
+        background-color: transparent;
+        border: none;
+        color: var(--grey);
+        font-size: 1.6rem;
+        border-bottom: 1px solid transparent;
+        margin: 0 2rem;
+        padding: 0 1rem 0.5rem;
+        cursor: pointer;
+
+        &.active {
+            border-color: var(--red);
+            font-weight: 500;
+            color: var(--black);
+        }
+    }
+}
+
+.about {
+    font-size: 1.6rem;    
+    padding: 0 2rem;
+    margin: - 1rem 0;
+    
+    p {
+        color: var(--grey);
+        line-height: 1.7;
+        text-align: left;
+        font-weight: 300;
+        margin-bottom: 1rem;
+    }
 }

src/components/shelf-details/ShelfDetails.tsx

@@ -11,7 +11,6 @@ import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
 import { IWord } from "../../structure/word";
-import { ALL_WORDS } from "../../data/all-words";
 
 export const ShelfDetails: React.FC = () => {
     const location = useLocation();
@@ -20,6 +19,7 @@ export const ShelfDetails: React.FC = () => {
     const category: ICategory = userProfileData.categories[category_id];
     const shelf: IShelf = category.shelves[shelf_id];
     const [searchWordResult, setSearchResult] = useState<Array<IWord>>(shelf.words);
+    const [selectedSegment, setSelectedSegment] = useState<'WORDS' | 'ABOUT'>('WORDS');
 
     const searchWords = (searchWord: string) => {
         if (searchWord.length > 0) {
@@ -73,22 +73,47 @@ export const ShelfDetails: React.FC = () => {
             </div>
         </section>
 
-        <ul className={styles.searchResult}>
-            { searchWordResult.map((word) => {
-                return <li key={word.name}>
-                    <header>
-                        <h4> { word.name } <span> { word.pronounciation } </span> </h4>
-                        <button>
-                            <SpeakerIcon />
-                        </button>
-                    </header>
-                    <div className={styles.description}>
-                        <span> { word.grammaticalDetails[0].typeName } </span>
-                        <p> { word.grammaticalDetails[0].description } </p>
-                    </div>
-                </li>
-            }) }
-        </ul>
+        <section className={styles.tabSegment}>
+            <button className={(selectedSegment==='WORDS' ? styles.active : '')}
+            onClick={() => setSelectedSegment('WORDS')}>
+                Words
+            </button>
+            <button className={(selectedSegment=== 'ABOUT' ? styles.active : '')}
+            onClick={() => setSelectedSegment('ABOUT')}>
+                About
+            </button>
+        </section>
+
+        {   selectedSegment === 'WORDS' &&
+            <ul className={styles.searchResult}>
+                { searchWordResult.map((word) => {
+                    return <li key={word.name}>
+                        <header>
+                            <h4> { word.name } <span> { word.pronounciation } </span> </h4>
+                            <button>
+                                <SpeakerIcon />
+                            </button>
+                        </header>
+                        <div className={styles.description}>
+                            <span> { word.grammaticalDetails[0].typeName } </span>
+                            <p> { word.grammaticalDetails[0].description } </p>
+                        </div>
+                    </li>
+                }) }
+            </ul>
+        }
+
+        {
+            selectedSegment === 'ABOUT' &&
+            <div className={styles.about}>
+                <p>
+                    { shelf.description }
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum quam eius corporis magnam velit debitis dignissimos, est a laudantium sapiente possimus omnis quis, voluptates quae praesentium expedita repellat modi optio!
+                </p>
+            </div>
+        }
 
     </section>
 }