Files
supabase/studio/components/interfaces/App/FeaturePreview/APISidePanelPreview.tsx
T
Joshen LimandTerry Sutton 94f5fc5a61 Feat/api side panel (#17880)
* Demo api side panel

* Add docs for storage and edge functions

* Add content

* fix

* Add scroll to logic

* Add storage docs

* Add docs URLs

* Add connecting to project section in getting started

* Link back to docs site for product + resource specific docs

* Add entry points into API side panel for table editor, auth users and storage

* Add entry points into API side panel for edge functions

* Beef up feature preview modal with content

* Fix asset path

* Address several feedback

* Addressing more feedback

* Shift GraphiQL page to database if new api docs flag enabled

* Spelling

* Wording changes

* Spacing and wording

* Fix small issues

* Fix

* Update key showing toggle button

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2023-10-05 13:30:12 +08:00

43 lines
1.4 KiB
TypeScript

import { useParams } from 'common'
import { Markdown } from 'components/interfaces/Markdown'
import { BASE_PATH } from 'lib/constants'
import Image from 'next/image'
const APISidePanelPreview = () => {
const { ref } = useParams()
return (
<div className="space-y-2">
<p className="text-foreground-light text-sm mb-4">
Your project's API documentation will be available on any page across the dashboard. <br />
Get contextualized code snippets based on what you're viewing in the dashboard. Less
thinking, more building.
</p>
<Image
src={`${BASE_PATH}/img/previews/api-docs-preview.png`}
width={1860}
height={970}
alt="api-docs-side-panel-preview"
className="rounded border"
/>
<div className="space-y-2 !mt-4">
<p className="text-sm">Enabling this preview will:</p>
<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
<li>
Replace the original API documentation page with a global API documentation side panel
that can be accessed anywhere while in a project.
</li>
<li>
<Markdown
className="text-foreground-light"
content={`Move the GraphiQL interface the Database section of the dashboard [here](/project/${ref}/database/graphiql).`}
/>
</li>
</ul>
</div>
</div>
)
}
export default APISidePanelPreview