mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
## 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). ```
37 lines
979 B
TypeScript
37 lines
979 B
TypeScript
import { useFlag, useParams } from 'common'
|
|
import { WrenchIcon } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { ADMIN_STUDIO_URL, IS_PLATFORM } from '@/lib/constants'
|
|
|
|
export const AdminStudioButton = () => {
|
|
const params = useParams()
|
|
const adminStudioLinkEnabled = useFlag('adminStudioLink')
|
|
|
|
const isVisible = IS_PLATFORM ? adminStudioLinkEnabled : false
|
|
|
|
if (!isVisible || !ADMIN_STUDIO_URL || !params.ref) return null
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
asChild
|
|
className="rounded-full w-[26px] h-[26px]"
|
|
icon={<WrenchIcon size={16} strokeWidth={1.5} />}
|
|
tooltip={{
|
|
content: {
|
|
text: 'Open in Admin Studio',
|
|
side: 'bottom',
|
|
align: 'center',
|
|
},
|
|
}}
|
|
>
|
|
<Link
|
|
href={`${ADMIN_STUDIO_URL}?identifier=${params.ref}`}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
/>
|
|
</ButtonTooltip>
|
|
)
|
|
}
|