diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index c1d9c3a0c94..8f45f7418da 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -407,6 +407,14 @@ const config: Config = { }, ], }, + announcementBar: { + id: 'watch_keynote', + content: + 'Re-watch the latest React Native Keynote from React Conf 2025', + backgroundColor: '#20232a', + textColor: '#fff', + isCloseable: false, + }, navbar: { title: 'React Native', logo: { diff --git a/website/src/components/Home/Watch/index.tsx b/website/src/components/Home/Watch/index.tsx index 26c72d5942e..85b04633f0a 100644 --- a/website/src/components/Home/Watch/index.tsx +++ b/website/src/components/Home/Watch/index.tsx @@ -12,6 +12,13 @@ import SectionTitle from '../SectionTitle'; import styles from './styles.module.css'; +enum VideoId { + Why = 'wUDeLT6WXnQ', + Keynote2025 = 'NiYwlvXsBKw', + Keynote2024 = 'Q5SMmKb7qVI', + FB2019 = 'NCAY0HIfrwc', +} + function Watch() { const [playingId, setPlayingId] = useState(null); @@ -38,62 +45,134 @@ function Watch() {
setPlayingId('fb2019')}> - {playingId === 'fb2019' ? ( + onClick={() => setPlayingId(VideoId.Why)}> + {playingId === VideoId.Why ? (