website/src/pages/ProductsSlugOrDetailPage.tsx

import { useParams } from 'react-router-dom'
import { isCuid } from '../lib/ids'
import ProductDetailPage from './ProductDetailPage'
import ProductsListPage from './ProductsListPage'

/** `/products/:slugOrId` — category slug list, or product detail when cuid. */
export default function ProductsSlugOrDetailPage() {
  const { slugOrId = '' } = useParams()
  if (isCuid(slugOrId)) {
    return <ProductDetailPage />
  }
  return <ProductsListPage />
}