mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { PlusIcon } from 'lucide-react'
|
|
import type { ReactNode } from 'react'
|
|
|
|
import { EXPLORER_SECTIONS, type ExplorerResourceType } from './ExplorerLayout.constants'
|
|
import { useCreateChat, useCreateNotebook } from '@/components/interfaces/Explorer/hooks'
|
|
import { SidebarBreadcrumb } from '@/components/layouts/Navigation/SidebarBreadcrumb'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
export const ExplorerNavHeader = ({
|
|
section,
|
|
onBack,
|
|
rootAction,
|
|
}: {
|
|
section: ExplorerResourceType | undefined
|
|
onBack: () => void
|
|
rootAction?: ReactNode
|
|
}) => {
|
|
const label = EXPLORER_SECTIONS.find((entry) => entry.type === section)?.label ?? 'Explorer'
|
|
|
|
return (
|
|
<SidebarBreadcrumb
|
|
aria-label="Explorer navigation"
|
|
label={label}
|
|
parent={section ? { label: 'Explorer', onClick: onBack } : undefined}
|
|
action={section ? <ExplorerResourceAction type={section} /> : rootAction}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const ExplorerResourceAction = ({ type }: { type: ExplorerResourceType }) => {
|
|
const { createNotebook } = useCreateNotebook()
|
|
const { createChat } = useCreateChat()
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
size="tiny"
|
|
variant="outline"
|
|
aria-label={`New ${type}`}
|
|
className="size-7 shrink-0 px-0"
|
|
icon={<PlusIcon />}
|
|
tooltip={{ content: { side: 'bottom', text: `New ${type}` } }}
|
|
onClick={() => {
|
|
if (type === 'notebook') createNotebook()
|
|
if (type === 'chat') createChat()
|
|
}}
|
|
/>
|
|
)
|
|
}
|