feat: add new props in the speaker card

frontend-ce · Jul 17, 2024 · 7fb24c8 · 7fb24c8
1 parent 02f2e01
commit 7fb24c8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
 }