Skip to content

fix prev/next links #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
birkskyum wants to merge 1 commit into from
Closed

fix prev/next links #408

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 102 additions & 25 deletions src/components/DocsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import { FrameworkSelect } from '~/components/FrameworkSelect'
import { useLocalStorage } from '~/utils/useLocalStorage'
import { DocsLogo } from '~/components/DocsLogo'
import { last, capitalize } from '~/utils/utils'

Check warning on line 19 in src/components/DocsLayout.tsx

View workflow job for this annotation

GitHub Actions / PR 

'capitalize' is defined but never used
import type { SelectOption } from '~/components/FrameworkSelect'
import type { ConfigSchema, MenuItem } from '~/utils/config'
import { create } from 'zustand'
Expand All @@ -25,7 +25,7 @@
import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
import { twMerge } from 'tailwind-merge'
import { partners } from '~/utils/partners'
import { useThemeStore } from './ThemeToggle'

Check warning on line 28 in src/components/DocsLayout.tsx

View workflow job for this annotation

GitHub Actions / PR 

'useThemeStore' is defined but never used
import {
GadFooter,
GadLeftRailSquare,
Expand Down Expand Up @@ -73,6 +73,7 @@
const setFramework = React.useCallback(
(framework: string) => {
navigate({
to: '.',
params: (prev) => ({
...prev,
framework,
Expand Down Expand Up @@ -142,6 +143,7 @@
const setVersion = React.useCallback(
(version: string) => {
navigate({
to: '.',
params: (prev: Record<string, string>) => ({
...prev,
version,
Expand Down Expand Up @@ -300,6 +302,84 @@
return versionConfig
}

const PrevNextButton = ({
item,
direction,
colorFrom,
colorTo,
textColor,
libraryId,
currentFramework,
params,
}: {
item: { to: string; label: React.ReactNode }
direction: 'prev' | 'next'
colorFrom: string
colorTo: string
textColor: string
libraryId: string
currentFramework: string
params: Record<string, string>
}) => {
const buttonContent = (
<div className="flex gap-2 items-center font-bold">
{direction === 'prev' ? (
<>
<FaArrowLeft />
{item.label}
</>
) : (
<>
<span
className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
>
{item.label}
</span>{' '}
<FaArrowRight className={textColor} />
</>
)}
</div>
)

const buttonClassName =
'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'

if (item.to.startsWith('http')) {
return (
<a href={item.to} className={buttonClassName}>
{buttonContent}
</a>
)
}

return (
<Link
to={
item.to.startsWith('/')
? item.to
: item.to.includes('framework/')
? '/$libraryId/$version/docs/framework/$framework/$'
: '/$libraryId/$version/docs/$'
}
params={{
libraryId,
version: params.version || 'latest',
...(item.to.includes('framework/')
? {
framework: currentFramework,
_splat: item.to.split('/').slice(2).join('/'),
}
: {
_splat: item.to,
}),
}}
className={buttonClassName}
>
{buttonContent}
</Link>
)
}

type DocsLayoutProps = {
name: string
version: string
Expand Down Expand Up @@ -327,8 +407,9 @@
}: DocsLayoutProps) {
const params = useParams({ strict: false })
const libraryId = params.libraryId || ''

const { _splat } = params

const { framework: currentFramework } = useCurrentFramework(frameworks)
const frameworkConfig = useFrameworkConfig({ frameworks })
const versionConfig = useVersionConfig({ versions })
const menuConfig = useMenuConfig({ config, frameworks, repo })
Expand Down Expand Up @@ -358,7 +439,7 @@

const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)

const [mounted, setMounted] = React.useState(false)

Check warning on line 442 in src/components/DocsLayout.tsx

View workflow job for this annotation

GitHub Actions / PR 

'mounted' is assigned a value but never used

React.useEffect(() => {
setMounted(true)
Expand Down Expand Up @@ -580,34 +661,30 @@
<div className="sticky flex items-center flex-wrap bottom-2 z-10 right-0 text-xs md:text-sm px-1 print:hidden">
<div className="w-1/2 px-1 flex justify-end flex-wrap">
{prevItem ? (
<Link
to={prevItem.to}
params
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"
>
<div className="flex gap-2 items-center font-bold">
<FaArrowLeft />
{prevItem.label}
</div>
</Link>
<PrevNextButton
item={prevItem}
direction="prev"
colorFrom={colorFrom}
colorTo={colorTo}
textColor={textColor}
libraryId={libraryId}
currentFramework={currentFramework}
params={params}
/>
) : null}
</div>
<div className="w-1/2 px-1 flex justify-start flex-wrap">
{nextItem ? (
<Link
to={nextItem.to}
params
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"
>
<div className="flex gap-2 items-center font-bold">
<span
className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
>
{nextItem.label}
</span>{' '}
<FaArrowRight className={textColor} />
</div>
</Link>
<PrevNextButton
item={nextItem}
direction="next"
colorFrom={colorFrom}
colorTo={colorTo}
textColor={textColor}
libraryId={libraryId}
currentFramework={currentFramework}
params={params}
/>
) : null}
</div>
</div>
Expand Down
Loading