Files
supabase/apps/www/components/CodeTabs/index.ts
Anthony Lio 12a1fd5427 fix(docs): codetabs file tabs (#50811)
## Problem

#50734 restyled single named code blocks as file tabs but code blocks
grouped with `<$CodeTabs>` render through a separate path and kept the
old pill style

## Solution

- add a `CodeTabs` component with the same file tab styling
- sets the `<$CodeTabs>` remark directive at it instead of `Tabs`
- remove the unused `NamedCodeBlock` copy in www (nothing in www outputs
it)

| state | preview |
| -------|------|
| before | <img width="781" height="352" alt="image"
src="https://github.com/user-attachments/assets/1e6261ae-30b7-4397-b2f4-c31bad5f9839"
/> |
| after | <img width="762" height="291" alt="image"
src="https://github.com/user-attachments/assets/851b25ed-98b7-4a5c-8d3e-fece385e3af2"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. visit
[/docs/guides/getting-started/quickstarts/nextjs](https://docs-git-fix-docs-codetabs-file-tabs-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#7-query-supabase-data-from-nextjs)


## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Documentation code samples support labeled tabs, with the first tab
selected by default.
* Source menus show organization and repository paths, and source links
remain labeled “View source.”
* **Style**
* Updated code sample tabs with active-tab accents and flares, plus
clearer focus outlines and depth effects.
* Refined code-block spacing and presentation, including a styled source
footer and updated menu alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-25 18:12:11 +03:00

2 lines
52 B
TypeScript

export { preprocessMdxWithCodeTabs } from './utils'