How should I go about extracting types from href?

[tonyjara]

I have a link button with custom styles I want to re-use in my codebase by I'm having trouble getting the types right. Specifically when params are involved.

//This works great for single line routes
export type IPathnames = keyof typeof routing.pathnames

This is the component where I'm trying to implement the type.

'use client'
import MuiLink from '@mui/material/Link'
import { IPathnames, Link as NextLink } from '@/lib/i18n/navigation'
import { SxProps, Theme } from '@mui/material'
import useProgressBarStore from '@/lib/store/useProgressBarStore'

const Link = ({
  sx,
  href,
  scroll,
  ...rest
}: {
  sx?: SxProps<Theme> | undefined
  href: IPathnames
  scroll?: boolean
  [x: string]: any
}) => {
  const { setShowProgressBar } = useProgressBarStore()
  return (
    <MuiLink
      onClick={() => setShowProgressBar(true)}
      href={href}
      scroll={scroll ?? false}
      component={NextLink}
      sx={{ textDecoration: 'none', color: 'terciary.main', ...sx }}
      {...rest}
    />
  )
}

export default Link

[amannn]

Have you seen https://next-intl-docs.vercel.app/docs/routing/navigation#link-composition?

[tonyjara]

yeeeessss omg, thank you so much.