mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { Menu } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { Button, Sheet, SheetContent, SheetHeader, SheetTitle } from 'ui'
|
|
|
|
import type { ShowApiKey } from '../../Docs/Docs.types'
|
|
import { LangSelector } from '../../Docs/LangSelector'
|
|
import { DocsMenu } from '@/components/interfaces/Integrations/DataApi/DocsMenu'
|
|
import { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
|
|
|
|
interface DocsMobileNavProps {
|
|
activePage: string
|
|
menu: Array<ProductMenuGroup>
|
|
selectedLang: 'js' | 'bash'
|
|
selectedApiKey: ShowApiKey
|
|
setSelectedLang: (lang: 'js' | 'bash') => void
|
|
setSelectedApiKey: (key: ShowApiKey) => void
|
|
}
|
|
|
|
export const DocsMobileNav = ({
|
|
activePage,
|
|
menu,
|
|
selectedLang,
|
|
selectedApiKey,
|
|
setSelectedLang,
|
|
setSelectedApiKey,
|
|
}: DocsMobileNavProps) => {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
// Close mobile nav when the active page changes
|
|
useEffect(() => {
|
|
setOpen(false)
|
|
}, [activePage])
|
|
|
|
return (
|
|
<>
|
|
<div className="sticky top-0 z-10 flex lg:hidden items-center border-b bg-surface-100 px-4 py-3">
|
|
<Button variant="default" icon={<Menu size={16} />} onClick={() => setOpen(true)}>
|
|
Menu
|
|
</Button>
|
|
</div>
|
|
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetContent side="left" size="content" className="w-72 overflow-y-auto">
|
|
<SheetHeader className="border-b-0">
|
|
<SheetTitle>Data API Docs</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="flex flex-col gap-y-6 px-5 pb-6">
|
|
<LangSelector
|
|
selectedLang={selectedLang}
|
|
selectedApiKey={selectedApiKey}
|
|
setSelectedLang={setSelectedLang}
|
|
setSelectedApiKey={setSelectedApiKey}
|
|
/>
|
|
<DocsMenu activePage={activePage} menu={menu} />
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</>
|
|
)
|
|
}
|