Skip to content

Commit

Permalink
feat(routes/show): add links to section headers
Browse files Browse the repository at this point in the history
This patch adds a little link icon that appears when a user hovers over
a section header that will link to that section's ID.
  • Loading branch information
nicholaschiang committed Jul 23, 2023
1 parent bd37e47 commit 58c0c23
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion app/routes/shows.$showId/section.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Link } from '@remix-run/react'
import { Link as LinkIcon } from 'lucide-react'
import { type PropsWithChildren } from 'react'

export function Section({
Expand All @@ -7,8 +9,14 @@ export function Section({
}: PropsWithChildren<{ id: string; header: string }>) {
return (
<section className='grid gap-2 pt-10' id={id}>
<h1 className='border-l-2 border-emerald-700 pl-1.5 font-medium text-base uppercase'>
<h1 className='border-l-2 border-emerald-700 pl-1.5 font-medium text-base uppercase flex items-center gap-1 group'>
{header}
<Link
to={`#${id}`}
className='opacity-0 group-hover:opacity-100 transition-opacity'
>
<LinkIcon className='w-4 h-4 text-gray-400 dark:text-gray-600' />
</Link>
</h1>
{children}
</section>
Expand Down

0 comments on commit 58c0c23

Please sign in to comment.