doc: Add link tree for React Paris

Author: franky47

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>
+  )
+}

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: '#todo-add-feedback-link',
+    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: (
+      <>
+        <span className="line-through">Twitter</span>{' '}
+        <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>
+  )
+}