feat: create the speaker-section component

src/components/SpeakerSection/SpeakerSection.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SpeakerSection } from "./SpeakerSection";
+
+export type Story = StoryObj<typeof SpeakerSection>;
+
+const meta: Meta<typeof SpeakerSection> = {
+  title: "Components/SpeakerSection",
+  tags: ["autodocs"],
+  component: SpeakerSection,
+  argTypes: {
+    handleCardModeChange: { action: "handleCardModeChange" },
+    liveTalk: { control: "object" },
+    savedCardIds: { control: undefined },
+    sectionTitle: { control: "text" },
+  },
+} satisfies Meta<typeof SpeakerSection>;
+
+export default meta;
+
+export const FrontEndCE: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "10:00",
+      title: "Como se tornar um desenvolvedor Front-End",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Jean Livino",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Front-End CE",
+  },
+};
+
+export const Comunidade: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "11:00",
+      title: "Como entrar na comunidade!",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Andressa Morais",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Comunidade",
+  },
+};
+
+export const Convida: Story = {
+  args: {
+    liveTalk: {
+      id: 1,
+      hour: "11:00",
+      title: "Fui convidado para um evento, e agora?",
+      tags: ["Javascript", "React", "Carreira"],
+      room: "Test Room",
+      speaker: {
+        image: "test.jpg",
+        title: "Bruno Oliveira",
+        role: "CEO Hackaton",
+        company: "FrontEnd CE",
+        bio: "Test bio",
+        social_link: "https://test.com",
+        id: 1,
+      },
+    },
+    savedCardIds: [],
+    sectionTitle: "Convida",
+  },
+};

src/components/SpeakerSection/SpeakerSection.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { SpeakerSection } from './SpeakerSection';
+
+test('renders SpeakerComponent', () => {
+  const liveTalk = {
+    id: 1,
+    hour: '10:00',
+    title: 'Test Talk',
+    tags: ['tag1', 'tag2'],
+    room: 'Test Room',
+    speaker: {
+      image: 'test.jpg',
+      title: 'Test Speaker',
+      role: 'Test Role',
+      company: 'Test Company',
+      bio: 'Test Bio',
+      social_link: 'https://test.com',
+      id: 1,
+    },
+  };
+  const { getByText } = render(<SpeakerSection handleCardModeChange={() => {}} liveTalk={liveTalk} savedCardIds={[]} sectionTitle="Test Section" />);
+  const element = getByText(/Test Section/i);
+  expect(element).toBeInTheDocument();
+});

src/components/SpeakerSection/SpeakerSection.tsx

@@ -0,0 +1,32 @@
+import { SpeakerCard } from "@/components/SpeakerCard";
+import { Button } from "@/components/ui/button";
+import { SpeakerSectionProps } from "./types";
+
+export const SpeakerSection = ({ sectionTitle, liveTalk, savedCardIds, handleCardModeChange }: SpeakerSectionProps) => {
+
+  return (
+    <section className="w-full">
+      {liveTalk && (
+        <div className="flex flex-col items-center w-full">
+          <Button className="max-w-[500px] w-full mt-8 bg-[#261537] justify-start pl-5 text-base font-semibold hover:bg-[#261537] text-[#E6D5F7]">
+            {sectionTitle}
+          </Button>
+          <div className="flex flex-col items-center gap-6 mt-6 w-full">
+            <SpeakerCard
+              isSaved={savedCardIds.includes(liveTalk.id)}
+              onChangeMode={(mode) => handleCardModeChange(liveTalk.id, mode)}
+              key={liveTalk.id}
+              hour={liveTalk.hour}
+              label={liveTalk.title}
+              tags={liveTalk.tags}
+              imageUrl={liveTalk.speaker.image}
+              imageFallback={liveTalk.speaker.title[0]}
+              name={liveTalk.speaker.title}
+              role={liveTalk.speaker.role}
+            />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};

src/components/SpeakerSection/index.ts

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

src/components/SpeakerSection/types.ts

@@ -0,0 +1,8 @@
+import { Palestra } from "@/api/types";
+
+export interface SpeakerSectionProps {
+  liveTalk: Palestra | undefined;
+  savedCardIds: number[];
+  sectionTitle: string;
+  handleCardModeChange: (cardId: number, newMode: boolean) => void;
+}