From f3395f49a2c0405cafefcf0217889b1d80d01426 Mon Sep 17 00:00:00 2001
From: Mohamed Ali Alkassas <elasasmohamed97@gmail.com>
Date: Wed, 25 Dec 2024 16:10:44 +0200
Subject: [PATCH] feat(nova): impl tutor card v1 in tutors page

---
 apps/nova/src/components/Tutors/Content.tsx   | 22 ++++++++++++++++---
 .../src/components/TutorCard/TutorCardV1.tsx  | 11 +++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/apps/nova/src/components/Tutors/Content.tsx b/apps/nova/src/components/Tutors/Content.tsx
index ad51179b..4b81994e 100644
--- a/apps/nova/src/components/Tutors/Content.tsx
+++ b/apps/nova/src/components/Tutors/Content.tsx
@@ -1,7 +1,7 @@
 import BookLesson from "@/components/Lessons/BookLesson";
 import { Route } from "@/types/routes";
 import { Loading } from "@litespace/luna/Loading";
-import { TutorCard } from "@litespace/luna/TutorCard";
+import { TutorCardV1 } from "@litespace/luna/TutorCard";
 import { asFullAssetUrl } from "@litespace/luna/backend";
 import { Element, ITutor, Void } from "@litespace/types";
 import { motion } from "framer-motion";
@@ -10,6 +10,21 @@ import { InView } from "react-intersection-observer";
 
 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;
@@ -29,7 +44,7 @@ const Content: React.FC<{
   if (!tutors) return null;
   return (
     <div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(256px,1fr))] gap-6">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(568px,1fr))] gap-6">
         {tutors.map((tutor) => {
           const profileUrl = Route.TutorProfile.replace(
             ":id",
@@ -41,7 +56,7 @@ const Content: React.FC<{
               animate={{ opacity: 1 }}
               key={tutor.id}
             >
-              <TutorCard
+              <TutorCardV1
                 id={tutor.id}
                 bio={tutor.bio}
                 about={tutor.about}
@@ -52,6 +67,7 @@ const Content: React.FC<{
                 onBook={() => openBookingDialog(tutor)}
                 profileUrl={profileUrl}
                 imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
+                topics={topics}
               />
             </motion.div>
           );
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
index 4cddd614..40373859 100644
--- a/packages/luna/src/components/TutorCard/TutorCardV1.tsx
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
@@ -50,7 +50,7 @@ export const TutorCardV1: React.FC<CardProps> = ({
   return (
     <div
       className={cn(
-        "tw-bg-natural-50 tw-flex tw-gap-4",
+        "tw-h-full tw-bg-natural-50 tw-flex tw-gap-4",
         "tw-border tw-border-transparent hover:tw-border hover:tw-border-natural-100",
         "tw-p-4 tw-shadow-ls-small tw-rounded-lg"
       )}
@@ -63,7 +63,7 @@ export const TutorCardV1: React.FC<CardProps> = ({
           object="cover"
         />
       </div>
-      <div>
+      <div className="tw-flex tw-flex-col">
         <Typography
           element="subtitle-1"
           weight="bold"
@@ -158,8 +158,8 @@ export const TutorCardV1: React.FC<CardProps> = ({
           </div>
         ) : null}
 
-        {!isEmpty(topics) ? (
-          <div className="tw-flex tw-mt-4 tw-gap-2 tw-flex-wrap tw-justify-start">
+        {!isEmpty(topics) && topics.join("").length > 0 ? (
+          <div className="tw-flex tw-my-4 tw-gap-2 tw-flex-wrap tw-justify-start">
             {topics.map((topic, idx) => {
               if ((isNewTutor && idx < 6) || (!isNewTutor && idx < 3))
                 return (
@@ -189,7 +189,8 @@ export const TutorCardV1: React.FC<CardProps> = ({
             </Typography>
           </div>
         ) : null}
-        <div className="tw-flex tw-gap-3 tw-mt-4">
+
+        <div className="tw-flex tw-gap-3 tw-mt-auto">
           <Button
             onClick={onBook}
             className="tw-grow tw-basis-1/2 tw-w-full"