Skip to content

Commit 1e99b42

Browse files
birkskyumbirkskyum
committed
abstract out the PrevNextButton
1 parent 61383b1 commit 1e99b42

1 file changed

Lines changed: 110 additions & 86 deletions

File tree

‎src/components/DocsLayout.tsx‎

Lines changed: 110 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,94 @@ const useVersionConfig = ({ versions }: { versions: string[] }) => {
302302
return versionConfig
303303
}
304304

305+
const PrevNextButton = ({
306+
item,
307+
direction,
308+
colorFrom,
309+
colorTo,
310+
textColor,
311+
libraryId,
312+
version,
313+
currentFramework,
314+
params,
315+
}: {
316+
item: { to: string; label: React.ReactNode }
317+
direction: 'prev' | 'next'
318+
colorFrom: string
319+
colorTo: string
320+
textColor: string
321+
libraryId: string
322+
version: string
323+
currentFramework: string
324+
params: Record<string, string>
325+
}) => {
326+
if (item.to.startsWith('http')) {
327+
return (
328+
<a
329+
href={item.to}
330+
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
331+
>
332+
<div className="flex gap-2 items-center font-bold">
333+
{direction === 'prev' ? (
334+
<>
335+
<FaArrowLeft />
336+
{item.label}
337+
</>
338+
) : (
339+
<>
340+
<span className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}>
341+
{item.label}
342+
</span>{' '}
343+
<FaArrowRight className={textColor} />
344+
</>
345+
)}
346+
</div>
347+
</a>
348+
)
349+
}
350+
351+
return (
352+
<Link
353+
to={
354+
item.to.startsWith('/')
355+
? item.to
356+
: item.to.includes('framework/')
357+
? '/$libraryId/$version/docs/framework/$framework/$'
358+
: '/$libraryId/$version/docs/$'
359+
}
360+
params={{
361+
libraryId,
362+
version: params.version || 'latest',
363+
...(item.to.includes('framework/')
364+
? {
365+
framework: currentFramework,
366+
_splat: item.to.split('/').slice(2).join('/'),
367+
}
368+
: {
369+
_splat: item.to,
370+
}),
371+
}}
372+
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
373+
>
374+
<div className="flex gap-2 items-center font-bold">
375+
{direction === 'prev' ? (
376+
<>
377+
<FaArrowLeft />
378+
{item.label}
379+
</>
380+
) : (
381+
<>
382+
<span className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}>
383+
{item.label}
384+
</span>{' '}
385+
<FaArrowRight className={textColor} />
386+
</>
387+
)}
388+
</div>
389+
</Link>
390+
)
391+
}
392+
305393
type DocsLayoutProps = {
306394
name: string
307395
version: string
@@ -585,96 +673,32 @@ export function DocsLayout({
585673
<div className="sticky flex items-center flex-wrap bottom-2 z-10 right-0 text-xs md:text-sm px-1 print:hidden">
586674
<div className="w-1/2 px-1 flex justify-end flex-wrap">
587675
{prevItem ? (
588-
prevItem.to.startsWith('http') ? (
589-
<a
590-
href={prevItem.to}
591-
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
592-
>
593-
<div className="flex gap-2 items-center font-bold">
594-
<FaArrowLeft />
595-
{prevItem.label}
596-
</div>
597-
</a>
598-
) : (
599-
<Link
600-
to={
601-
prevItem.to.startsWith('/')
602-
? prevItem.to
603-
: prevItem.to.includes('framework/')
604-
? '/$libraryId/$version/docs/framework/$framework/$'
605-
: '/$libraryId/$version/docs/$'
606-
}
607-
params={{
608-
libraryId,
609-
version: params.version || 'latest',
610-
...(prevItem.to.includes('framework/')
611-
? {
612-
framework: currentFramework,
613-
_splat: prevItem.to.split('/').slice(2).join('/'),
614-
}
615-
: {
616-
_splat: prevItem.to,
617-
}),
618-
}}
619-
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
620-
>
621-
<div className="flex gap-2 items-center font-bold">
622-
<FaArrowLeft />
623-
{prevItem.label}
624-
</div>
625-
</Link>
626-
)
676+
<PrevNextButton
677+
item={prevItem}
678+
direction="prev"
679+
colorFrom={colorFrom}
680+
colorTo={colorTo}
681+
textColor={textColor}
682+
libraryId={libraryId}
683+
version={version}
684+
currentFramework={currentFramework}
685+
params={params}
686+
/>
627687
) : null}
628688
</div>
629689
<div className="w-1/2 px-1 flex justify-start flex-wrap">
630690
{nextItem ? (
631-
nextItem.to.startsWith('http') ? (
632-
<a
633-
href={nextItem.to}
634-
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
635-
>
636-
<div className="flex gap-2 items-center font-bold">
637-
<span
638-
className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
639-
>
640-
{nextItem.label}
641-
</span>{' '}
642-
<FaArrowRight className={textColor} />
643-
</div>
644-
</a>
645-
) : (
646-
<Link
647-
to={
648-
nextItem.to.startsWith('/')
649-
? nextItem.to
650-
: nextItem.to.includes('framework/')
651-
? '/$libraryId/$version/docs/framework/$framework/$'
652-
: '/$libraryId/$version/docs/$'
653-
}
654-
params={{
655-
libraryId,
656-
version: params.version || 'latest',
657-
...(nextItem.to.includes('framework/')
658-
? {
659-
framework: currentFramework,
660-
_splat: nextItem.to.split('/').slice(2).join('/'),
661-
}
662-
: {
663-
_splat: nextItem.to,
664-
}),
665-
}}
666-
className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
667-
>
668-
<div className="flex gap-2 items-center font-bold">
669-
<span
670-
className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
671-
>
672-
{nextItem.label}
673-
</span>{' '}
674-
<FaArrowRight className={textColor} />
675-
</div>
676-
</Link>
677-
)
691+
<PrevNextButton
692+
item={nextItem}
693+
direction="next"
694+
colorFrom={colorFrom}
695+
colorTo={colorTo}
696+
textColor={textColor}
697+
libraryId={libraryId}
698+
version={version}
699+
currentFramework={currentFramework}
700+
params={params}
701+
/>
678702
) : null}
679703
</div>
680704
</div>

0 commit comments

Comments
 (0)