refactor(nova): improve topics layout

litespace-org · Dec 26, 2024 · ddd4fd2 · ddd4fd2
1 parent 5bdd48e
commit ddd4fd2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 33 deletions.
diff --git a/apps/nova/src/components/Tutors/Content.tsx b/apps/nova/src/components/Tutors/Content.tsx
@@ -8,29 +8,14 @@ import { motion } from "framer-motion";
 import React, { useCallback, useState } from "react";
 import { InView } from "react-intersection-observer";
 import MoreTutorsSoon from "@litespace/assets/MoreTutorsSoon";
-import Notification from "@litespace/assets/Notification";
+import Notification2 from "@litespace/assets/Notification2";
 import { Typography } from "@litespace/luna/Typography";
 import { useFormatMessage } from "@litespace/luna/hooks/intl";
 import { Button, ButtonSize } from "@litespace/luna/Button";
 import { useToast } from "@litespace/luna/Toast";
 
 type Tutor = Element<ITutor.FindOnboardedTutorsApiResponse["list"]>;
 
-const topics = [
-  "hobbies",
-  "travel",
-  "books",
-  "food",
-  "family",
-  "health",
-  "career",
-  "culture",
-  "holidays",
-  "work",
-  "favourite subjects",
-  "current events",
-];
-
 const Content: React.FC<{
   tutors: ITutor.FindOnboardedTutorsApiResponse["list"] | null;
   loading: boolean;
@@ -75,7 +60,7 @@ const Content: React.FC<{
                 onBook={() => openBookingDialog(tutor)}
                 profileUrl={profileUrl}
                 imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
-                topics={topics}
+                topics={tutor.topics}
               />
             </motion.div>
           );
@@ -127,13 +112,7 @@ const Content: React.FC<{
             >
               {intl("tutors.coming.set-notifications")}
             </Typography>
-            <Notification
-              width={24}
-              height={24}
-              viewBox="0 0 16 16"
-              fill="var(--natural-50)"
-              className="block [&>*]:stroke-natural-50"
-            />
+            <Notification2 width={24} height={24} />
           </div>
         </Button>
       </div>

diff --git a/packages/assets/assets/notification-2.svg b/packages/assets/assets/notification-2.svg
diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -77,6 +77,7 @@
     "./MoreTutorsSoon": "./dist/MoreTutorsSoon.tsx",
     "./More": "./dist/More.tsx",
     "./NewTutor": "./dist/NewTutor.tsx",
+    "./Notification2": "./dist/Notification2.tsx",
     "./Notification": "./dist/Notification.tsx",
     "./Paperclip": "./dist/Paperclip.tsx",
     "./Pause": "./dist/Pause.tsx",

diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
@@ -17,6 +17,9 @@ import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Tooltip } from "@/components/Tooltip";
 
+const FRESH_TUTOR_MAX_TOPIC_COUNT = 7;
+const TUTOR_MAX_TOPIC_COUNT = 3;
+
 export const TutorCardV1: React.FC<CardProps> = ({
   id,
   name,
@@ -30,22 +33,22 @@ export const TutorCardV1: React.FC<CardProps> = ({
   onBook,
 }) => {
   const intl = useFormatMessage();
-  const isNewTutor = useMemo(
+  const isFreshTutor = useMemo(
     () => !studentCount && !lessonCount && !rating,
     [lessonCount, rating, studentCount]
   );
 
   const remainingTopicsCount = useMemo(() => {
-    // 3 is the number of the topics presented in one line
-    // 6 is the number of the topics presented in two lines
-    const displayedCount = !isNewTutor ? 3 : 6;
+    const displayedCount = !isFreshTutor
+      ? FRESH_TUTOR_MAX_TOPIC_COUNT
+      : TUTOR_MAX_TOPIC_COUNT;
     const totalTopics = topics.length;
 
     const remainingTopicsCount =
       totalTopics < displayedCount ? 0 : totalTopics - displayedCount;
 
     return remainingTopicsCount;
-  }, [isNewTutor, topics]);
+  }, [isFreshTutor, topics]);
 
   return (
     <div
@@ -90,7 +93,7 @@ export const TutorCardV1: React.FC<CardProps> = ({
           </Typography>
         </Link>
 
-        {!isNewTutor ? (
+        {!isFreshTutor ? (
           <div className={cn("tw-flex tw-gap-8 tw-my-4")}>
             {studentCount ? (
               <div className="tw-flex tw-flex-col tw-gap-1">
@@ -159,15 +162,23 @@ export const TutorCardV1: React.FC<CardProps> = ({
         ) : null}
 
         {!isEmpty(topics) && topics.join("").length > 0 ? (
-          <div className="tw-flex tw-my-4 tw-gap-2 tw-flex-wrap tw-justify-start">
+          <div
+            className={cn(
+              "tw-flex tw-gap-2 tw-flex-wrap tw-justify-start tw-mb-4",
+              { "tw-mt-4": isFreshTutor }
+            )}
+          >
             {topics.map((topic, idx) => {
-              if ((isNewTutor && idx < 6) || (!isNewTutor && idx < 3))
+              if (
+                (isFreshTutor && idx < FRESH_TUTOR_MAX_TOPIC_COUNT) ||
+                (!isFreshTutor && idx < TUTOR_MAX_TOPIC_COUNT)
+              )
                 return (
                   <Tooltip
                     key={idx}
                     content={<Typography element="body">{topic}</Typography>}
                   >
-                    <div className="tw-w-1/4">
+                    <div className="tw-w-16">
                       <Typography
                         element="tiny-text"
                         weight="regular"