diff --git a/packages/docs/public/react-paris-25-slides.pdf b/packages/docs/public/react-paris-25-slides.pdf new file mode 100644 index 000000000..4a8aa32f3 Binary files /dev/null and b/packages/docs/public/react-paris-25-slides.pdf differ diff --git a/packages/docs/src/app/(pages)/react-paris/link-tree.tsx b/packages/docs/src/app/(pages)/react-paris/link-tree.tsx new file mode 100644 index 000000000..28497d0bb --- /dev/null +++ b/packages/docs/src/app/(pages)/react-paris/link-tree.tsx @@ -0,0 +1,45 @@ +import { Button } from '@/src/components/ui/button' +import Link from 'next/link' +import { ReactNode } from 'react' + +export type LinkTreeItemProps = { + href: string + icon: ReactNode + label: ReactNode +} + +export function LinkTreeItem({ href, icon, label }: LinkTreeItemProps) { + const isLocalRoute = href.startsWith('/') + return ( + <li> + <Button + asChild + variant="outline" + className="flex w-full items-center justify-center gap-3 py-6 text-lg transition-all hover:scale-[1.01]" + > + <Link + href={href} + target={isLocalRoute ? undefined : '_blank'} + rel={isLocalRoute ? undefined : 'noopener noreferrer'} + > + {icon} + <span>{label}</span> + </Link> + </Button> + </li> + ) +} + +type LinkTreeProps = { + items: LinkTreeItemProps[] +} + +export function LinkTree({ items }: LinkTreeProps) { + return ( + <ul className="space-y-4"> + {items.map((item, index) => ( + <LinkTreeItem key={index} {...item} /> + ))} + </ul> + ) +} diff --git a/packages/docs/src/app/(pages)/react-paris/page.tsx b/packages/docs/src/app/(pages)/react-paris/page.tsx new file mode 100644 index 000000000..36b94724d --- /dev/null +++ b/packages/docs/src/app/(pages)/react-paris/page.tsx @@ -0,0 +1,121 @@ +import { ReactParisLogo } from '@/src/components/react-paris' +import { SiBluesky, SiDiscord } from '@icons-pack/react-simple-icons' +import { + Github, + Images, + Library, + Linkedin, + Mail, + Twitter, + Youtube +} from 'lucide-react' +import { Logo } from '../blog/[slug]/_components/47ng' +import { LinkTree, LinkTreeItemProps } from './link-tree' + +const links: LinkTreeItemProps[] = [ + { + href: 'https://discord.com/channels/723276276072317098/1352179917680283743', + icon: <SiDiscord className="size-5" />, + label: <>Questions & Feedback 🙏</> + }, + { + href: '/', + icon: <Library className="size-5" />, + label: 'Documentation' + }, + { + href: 'https://github.com/47ng/nuqs', + icon: <Github className="size-5" />, + label: ( + <> + GitHub{' '} + <span className="text-sm text-muted-foreground"> + (give nuqs a star! ⭐) + </span> + </> + ) + }, + { + href: 'https://github.com/franky47/react-paris-25-demo', + icon: <Github className="size-5" />, + label: 'Demo app' + }, + { + href: 'https://nuqs.47ng.com/react-paris-25-slides.pdf', + icon: <Images className="size-5" />, + label: 'Slides' + }, + { + href: 'https://bsky.app/profile/francoisbest.com', + icon: <SiBluesky className="size-5" />, + label: ( + <> + Bluesky{' '} + <span className="text-sm text-muted-foreground">@francoisbest.com</span> + </> + ) + }, + { + href: 'https://bsky.app/profile/nuqs.47ng.com', + icon: <SiBluesky className="size-5" />, + label: ( + <> + Bluesky{' '} + <span className="text-sm text-muted-foreground">@nuqs.47ng.com</span> + </> + ) + }, + { + href: 'https://www.youtube.com/@47ng-dev', + icon: <Youtube className="size-5" />, + label: 'YouTube' + }, + { + href: 'https://www.linkedin.com/in/francoisbest/', + icon: <Linkedin className="size-5" />, + label: <>LinkedIn</> + }, + { + href: 'mailto:nuqs@47ng.com', + icon: <Mail className="size-5" />, + label: 'Contact me' + }, + { + href: 'https://x.com/nuqs47ng', + icon: <Twitter className="size-5" />, + label: ( + <> + Twitter <span className="text-sm text-muted-foreground">@nuqs47ng</span> + </> + ) + }, + { + href: 'https://x.com/fortysevenfx', + icon: <Twitter className="size-5" />, + label: ( + <> + Twitter{' '} + <span className="text-sm text-muted-foreground"> + @fortysevenfx (archived) + </span> + </> + ) + } +] + +export default function Page() { + return ( + <section className="container max-w-lg py-12"> + <div className="flex items-center justify-center gap-12"> + <Logo className="size-16" /> + <ReactParisLogo className="-mx-4 mb-4 size-24 translate-y-1.5" /> + </div> + <p className="mb-2 text-center">Thanks for attending my talk! 🫶</p> + <p className="mb-8 text-balance text-center"> + Here are some useful links to learn more about nuqs, and how to find me + on social media: + </p> + <LinkTree items={links} /> + </section> + ) +}