mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Gildas Garcia
cabe14e5ca
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { Boxes } from 'lucide-react'
|
|
import { SheetHeader, SheetTitle, Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
|
|
import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
|
|
|
|
import { OrganizationDropdown } from '@/components/layouts/AppLayout/OrganizationDropdown'
|
|
import type { Organization } from '@/types'
|
|
|
|
const embeddedClassName =
|
|
'bg-transparent border-0 shadow-none min-h-0 flex-1 flex flex-col overflow-hidden rounded-none'
|
|
|
|
export interface OrgSelectorSheetProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onClose: () => void
|
|
selectedOrganization?: Organization | null
|
|
selectedOrganizationName?: string | null
|
|
}
|
|
|
|
export function OrgSelectorSheet({
|
|
open,
|
|
onOpenChange,
|
|
onClose,
|
|
selectedOrganization,
|
|
selectedOrganizationName,
|
|
}: OrgSelectorSheetProps) {
|
|
const orgLabel = selectedOrganizationName ?? selectedOrganization?.name ?? 'Select organization'
|
|
|
|
return (
|
|
<MobileSheetNav
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
className="flex flex-col overflow-hidden h-[85dvh] md:max-h-[500px]"
|
|
>
|
|
<Tabs
|
|
defaultValue="organization"
|
|
className="flex flex-col flex-1 min-h-0 overflow-hidden p-0"
|
|
>
|
|
<SheetHeader className="border-0 border-default p-0 shrink-0">
|
|
<SheetTitle className="sr-only">Switch organization</SheetTitle>
|
|
<TabsList className="w-full grid grid-cols-1 shrink-0">
|
|
<TabsTrigger
|
|
value="organization"
|
|
className="text-xs flex flex-col items-center gap-1.5 px-4 py-3 data-[state=active]:border-0"
|
|
>
|
|
<Boxes className="shrink-0" size={16} strokeWidth={1.5} />
|
|
<span className="truncate max-w-full text-xs leading-tight" title={orgLabel}>
|
|
{orgLabel}
|
|
</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</SheetHeader>
|
|
<TabsContent
|
|
value="organization"
|
|
className="flex-1 min-h-0 overflow-hidden flex flex-col mt-0 p-0 data-[state=inactive]:hidden"
|
|
>
|
|
<OrganizationDropdown embedded className={embeddedClassName} onClose={onClose} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</MobileSheetNav>
|
|
)
|
|
}
|