From 7fb24c8b694b9dcf4cac9124c5e87b7883d3e103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Vitor=20Farias?=
 <84153149+jv-farias@users.noreply.github.com>
Date: Wed, 17 Jul 2024 03:41:24 +0000
Subject: [PATCH] feat: add new props in the speaker card

---
 .../SpeakerCard/SpeakerCard.stories.tsx       |  4 +++
 .../SpeakerCard/SpeakerCard.test.tsx          |  2 ++
 src/components/SpeakerCard/SpeakerCard.tsx    | 27 +++++++++----------
 src/components/SpeakerCard/types.ts           |  2 ++
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/SpeakerCard/SpeakerCard.stories.tsx b/src/components/SpeakerCard/SpeakerCard.stories.tsx
index 510a077..54c2e3e 100644
--- a/src/components/SpeakerCard/SpeakerCard.stories.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof SpeakerCard> = {
     name: { control: "text" },
     role: { control: "text" },
     onChangeMode: { action: "mode changed" },
+    hour: { control: "text" },
+    isSaved: { control: "boolean" },
   },
 } satisfies Meta<typeof SpeakerCard>;
 
@@ -28,5 +30,7 @@ export const Default: Story = {
     imageUrl: "",
     name: "Abraão",
     role: "Developer",
+    hour: "10:00",
+    isSaved: true,
   },
 };
diff --git a/src/components/SpeakerCard/SpeakerCard.test.tsx b/src/components/SpeakerCard/SpeakerCard.test.tsx
index e44bf32..bc9aae4 100644
--- a/src/components/SpeakerCard/SpeakerCard.test.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.test.tsx
@@ -11,6 +11,8 @@ test("renders SpeakerCard", () => {
       role="Developer"
       tags={["Frontend", "Convida", "Comunidade"]}
       label="Typescript morreu?"
+      hour="10:00"
+      isSaved={true}
     />
   );
   const element = getByText(/Typescript morreu?/i);
diff --git a/src/components/SpeakerCard/SpeakerCard.tsx b/src/components/SpeakerCard/SpeakerCard.tsx
index 8e06daf..96d62c7 100644
--- a/src/components/SpeakerCard/SpeakerCard.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.tsx
@@ -3,7 +3,7 @@ import { ProfileCard } from "../ProfileCard";
 import { Badge } from "../ui/badge";
 import { Card } from "../ui/card";
 import { SpeakerCardProps } from "./types";
-import { Togglebutton } from "../Togglebutton";
+import { ToggleButton } from "../ToggleButton";
 
 export const SpeakerCard = ({
   label,
@@ -12,34 +12,33 @@ export const SpeakerCard = ({
   imageUrl,
   name,
   role,
+  hour,
+  isSaved,
   onChangeMode,
 }: SpeakerCardProps) => {
+  const handleToggleSave = () => {
+    onChangeMode(!isSaved);
+  };
+
   return (
-    <Card className="max-w-[300px] p-3 flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
+    <Card className="max-w-[500px] p-5 w-full flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
       <div className="flex gap-3 justify-between items-start w-full">
-        <span className="text-[#A190B2]">8:00</span>
-        <h1
-          className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base max-w-[180px] break-words"
-        >
+        <span className="text-[#A190B2] text-sm">{hour}</span>
+        <h1 className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base break-words">
           {label}
         </h1>
-        <Togglebutton initialMode={true} onModeChange={onChangeMode} />{" "}
+        <ToggleButton isSaved={isSaved} onToggle={handleToggleSave} />
       </div>
       <div className="flex gap-2 w-full justify-start overflow-x-auto scrollbar-cards [&::-webkit-scrollbar]:hidden">
-        {tags.map((tag: string) => (
+        {tags.map((tag: string, index) => (
           <Badge
+            key={index}
             variant="outline"
             className="bg-white text-[#A855F7] font-thin rounded-lg"
           >
             {tag}
           </Badge>
         ))}
-        <Badge
-          variant="outline"
-          className="bg-white text-[#A855F7] font-thin rounded-lg"
-        >
-          Carreira
-        </Badge>
       </div>
       <div className=" flex-cols p-2  w-full">
         <Separator className="w-full h-[0.3px] mb-4 bg-[#D9B1FF] rounded-xl" />
diff --git a/src/components/SpeakerCard/types.ts b/src/components/SpeakerCard/types.ts
index 1742b70..72cb42d 100644
--- a/src/components/SpeakerCard/types.ts
+++ b/src/components/SpeakerCard/types.ts
@@ -3,5 +3,7 @@ import { ProfileCardProps } from "../ProfileCard/types"
 export interface SpeakerCardProps extends ProfileCardProps {
     label: string
     tags: string[]
+    hour: string
+    isSaved: boolean
     onChangeMode: (mode: boolean) => void
 }
\ No newline at end of file