Files
supabase/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
T
Gildas Garcia 243e079a2c chore: remove _Shadcn_ suffix from Command components (#46153)
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Command` components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

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

## Summary by CodeRabbit

* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-20 15:45:32 +02:00

88 lines
2.5 KiB
TypeScript

import { ChevronDown, Terminal } from 'lucide-react'
import { useState } from 'react'
import {
Button,
Command,
CommandGroup,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
} from 'ui'
import { BASE_PATH } from '@/lib/constants'
import { useAppStateSnapshot } from '@/state/app-state'
interface LanguageSelectorProps {
/**
* Only show icons to represent the language
*/
simplifiedVersion?: boolean
}
const LanguageSelector = ({ simplifiedVersion = false }: LanguageSelectorProps) => {
const snap = useAppStateSnapshot()
const [showLanguage, setShowLanguage] = useState(false)
const updateLanguage = (value: 'js' | 'bash') => {
snap.setDocsLanguage(value)
setShowLanguage(false)
}
return (
<div className="flex items-center gap-x-2">
<Popover modal={false} open={showLanguage} onOpenChange={setShowLanguage}>
<PopoverTrigger asChild>
<Button
type="default"
className={simplifiedVersion ? 'px-1' : ''}
icon={
simplifiedVersion ? (
snap.docsLanguage === 'js' ? (
<img
src={`${BASE_PATH}/img/libraries/javascript-icon.svg`}
alt={`javascript logo`}
width="14"
/>
) : (
<Terminal size={14} strokeWidth={2.5} />
)
) : undefined
}
iconRight={!simplifiedVersion && <ChevronDown size={14} strokeWidth={2} />}
>
{!simplifiedVersion
? `Language: ${snap.docsLanguage === 'js' ? 'Javascript' : 'Bash'}`
: undefined}
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-24" side="bottom" align="end">
<Command>
<CommandList>
<CommandGroup>
<CommandItem
className="cursor-pointer"
onSelect={() => updateLanguage('js')}
onClick={() => updateLanguage('js')}
>
<p>Javascript</p>
</CommandItem>
<CommandItem
className="cursor-pointer"
onSelect={() => updateLanguage('bash')}
onClick={() => updateLanguage('bash')}
>
<p>Bash</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)
}
export default LanguageSelector