-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create the speaker-section component
- Loading branch information
1 parent
1a96744
commit be0c5b7
Showing
5 changed files
with
154 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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", | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { SpeakerSection } from "./SpeakerSection" | ||
|
||
export { SpeakerSection } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |