Skip to content

Commit

Permalink
feat(nx-dev): update home hero & livestream notifier (nrwl#28403)
Browse files Browse the repository at this point in the history
  • Loading branch information
bcabanes authored Oct 12, 2024
1 parent 37a7eb1 commit 74bdc58
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 11 deletions.
41 changes: 31 additions & 10 deletions nx-dev/ui-common/src/lib/live-stream-notifier.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 13 additions & 1 deletion nx-dev/ui-home/src/lib/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 74bdc58

Please sign in to comment.