miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): update home hero & livestream notifier (#28403)

Browse Source
This commit is contained in:
Benjamin Cabanes 2024-10-12 14:11:56 -07:00 committed by GitHub
parent 37a7eb17fe
commit 74bdc583b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
nx-dev/ui-common/src/lib/live-stream-notifier.tsx
View File

@ -3,9 +3,14 @@
import { useState, useEffect, ReactElement } from 'react';
import { motion } from 'framer-motion';
import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
import { XMarkIcon, VideoCameraIcon } from '@heroicons/react/24/outline';
import { ButtonLink } from './button';
import {
PlayIcon,
XMarkIcon,
ChatBubbleLeftRightIcon,
} from '@heroicons/react/24/outline';
export function LiveStreamNotifier(): ReactElement {
export function LiveStreamNotifier(): ReactElement | null {
const [isVisible, setIsVisible] = useState<boolean>(true);
useEffect(() => {
@ -57,33 +62,49 @@ export function LiveStreamNotifier(): ReactElement {
aria-hidden="true"
className="size-8 flex-shrink-0"
/>
<span>Monorepo World just ended!</span>
<span>Monorepo World live replays available!</span>
</motion.h3>
<motion.div key="live-event" className="mt-4 space-y-4">
<p className="mb-2 text-sm">
In case you missed Monorepo World, it is now available for replay.
Watch the replays of exciting talks on developer tooling and
monorepos! Catch all the insightful presentations from the event
on our YouTube channel.
</p>
<div className="flex flex-wrap items-center gap-1 sm:gap-4">
<a
title="Track 1 replay"
title="Watch track 1"
href="http://go.nx.dev/MWTrack1"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
>
<VideoCameraIcon aria-hidden="true" className="size-5" />
<span>Track 1 replay</span>
<PlayIcon aria-hidden="true" className="size-4" />
<span>Track 1</span>
</a>
<a
href="http://go.nx.dev/MWTrack2"
target="_blank"
title="Track 2 replay"
title="Watch track 2"
rel="noopener noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
>
<VideoCameraIcon aria-hidden="true" className="size-5" />
<span>Track 2 replay</span>
<PlayIcon aria-hidden="true" className="size-4" />
<span>Track 2</span>
</a>
<ButtonLink
variant="secondary"
size="small"
href="https://discord.gg/7yFabzBP"
target="_blank"
title="Join the discussion on Discord"
rel="noopener noreferrer"
>
<ChatBubbleLeftRightIcon
aria-hidden="true"
className="size-4"
/>
<span>#monorepo-world</span>
</ButtonLink>
</div>
</motion.div>
</div>

14
nx-dev/ui-home/src/lib/hero.tsx
View File

@ -6,7 +6,11 @@ import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
import { useState } from 'react';
import Link from 'next/link';
import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
import {
MonorepoWorldIcon,
RustIcon,
TypeScriptIcon,
} from '@nx/nx-dev/ui-icons';
import { motion, MotionConfig } from 'framer-motion';
export function Hero(): JSX.Element {
@ -80,6 +84,14 @@ export function Hero(): JSX.Element {
Contact us
</ButtonLink>
</div>
<div className="mt-4 flex items-center justify-center gap-2 text-sm italic">
Built with
<RustIcon aria-hidden="true" className="size-5 shrink-0" />
<span className="sr-only">Rust</span> for speed &
<TypeScriptIcon aria-hidden="true" className="size-4 shrink-0" />
<span className="sr-only">TypeScript</span> for extensibility.
</div>
</div>
</div>
</div>