mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Francesco Sansalvadore
b997b7fb13
- add new [OrgSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-214b339101a9c06864ea2755ac7246eb4c971ce74c5d3169b1385a28ee1d4227) and [ProjectBranchSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-82d25c128c306b61bea7481026f58f670a229874f23ca3a1a1d78ddeabde21e0) components to the mobile navigation, replacing the previous which took up a lot of horizontal space - org/project/branch dropdowns now open up in the bottom MobileSheetNav for a better mobile ux - desktop nav remains unchanged
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
import { cn, TabsTrigger_Shadcn_ } from 'ui'
|
|
|
|
export interface ProjectBranchSelectorSheetTabTriggerProps {
|
|
value: 'organization' | 'project' | 'branch'
|
|
label: string
|
|
icon: LucideIcon
|
|
isMainBranch?: boolean
|
|
isLast: boolean
|
|
}
|
|
|
|
export function ProjectBranchSelectorSheetTabTrigger({
|
|
value,
|
|
label,
|
|
icon: Icon,
|
|
isMainBranch = false,
|
|
isLast,
|
|
}: ProjectBranchSelectorSheetTabTriggerProps) {
|
|
const isBranch = value === 'branch'
|
|
const isProductionBranch = isBranch && isMainBranch
|
|
|
|
return (
|
|
<TabsTrigger_Shadcn_
|
|
value={value}
|
|
className={cn(
|
|
'group relative text-xs flex flex-col items-center gap-1.5 px-4 py-3 data-[state=active]:bg-surface-200 data-[state=active]:border-foreground-light border-b duration-0',
|
|
isProductionBranch &&
|
|
'text-warning data-[state=active]:text-warning hover:text-warning hover:opacity-70'
|
|
)}
|
|
>
|
|
<Icon className="shrink-0" size={16} strokeWidth={1.5} />
|
|
<span className="truncate max-w-full text-xs leading-tight" title={label}>
|
|
{label}
|
|
</span>
|
|
|
|
{!isLast && (
|
|
<svg
|
|
aria-hidden="true"
|
|
width="100%"
|
|
height="100%"
|
|
viewBox="0 0 6 63"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="absolute duration-0 bottom-0 top-0 -right-2 w-3 h-full z-10"
|
|
>
|
|
<path
|
|
d="M5.49365 31L0.493652 0V62L5.49365 31Z"
|
|
className="fill-[hsl(var(--background-dash-sidebar))] group-data-[state=active]:fill-[hsl(var(--background-surface-200))]"
|
|
/>
|
|
<path d="M0.493652 0L5.49365 31L0.493652 62" stroke="hsl(var(--border-default))" />
|
|
</svg>
|
|
)}
|
|
</TabsTrigger_Shadcn_>
|
|
)
|
|
}
|