Add new props in speaker card (#49)

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,
   },
 };

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);

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" />

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
 }

src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleButton } from "./ToggleButton";
+import { action } from "@storybook/addon-actions";
+
+export type Story = StoryObj<typeof ToggleButton>;
+
+const meta: Meta<typeof ToggleButton> = {
+  title: "Components/ToggleButton",
+  component: ToggleButton,
+  argTypes: {
+    isSaved: { control: "boolean" },
+    onToggle: { action: "mode changed" },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+export const PlusButton: Story = {
+  args: {
+    isSaved: true,
+    onToggle: action("mode changed"),
+  },
+};
+
+export const MinusButton: Story = {
+  args: {
+    isSaved: false,
+    onToggle: action("mode changed"),
+  },
+};

src/components/ToggleButton/ToggleButton.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+test('renders Togglebutton', () => {
+  const { getByTestId } = render(<ToggleButton isSaved={true} onToggle={() => (true)} />);
+  const element = getByTestId("toggleButton");
+  expect(element).toBeInTheDocument();
+});

src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,14 @@
+import { CircleMinus, CirclePlus } from "lucide-react";
+
+type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};
+
+export const ToggleButton = ({ isSaved, onToggle }: ToggleButtonProps) => {
+  return (
+    <div data-testid="toggleButton" onClick={() => onToggle(!isSaved)}>
+      {isSaved ? ( <CircleMinus color="#ffffff" /> ) : ( <CirclePlus color="#ffffff" /> )}
+    </div>
+  );
+};

src/components/ToggleButton/index.ts

@@ -0,0 +1,3 @@
+import { ToggleButton } from "./ToggleButton"
+
+export { ToggleButton }

src/components/ToggleButton/types.ts

@@ -0,0 +1,4 @@
+export type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};