mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Batuhan Wilhelm
8cfe645f2b
* docs: update Refine svg in HeroFrameworks * docs: use capital R for Refine mentions * docs: use main branch for Refine repository references * docs: update connect interface example code for Refine * docs: update Refine quick start tutorial with Refine v5 * examples(refine-user-management): upgrade to Refine v5 * docs: update Refine getting started tutorial with Refine v5 * chore(studio): update Refine icon on Connect modal * docs: update Refine svg * docs: update welcome screen screenshot in Refine tutorial * docs: update dimensions of welcome screen screenshot in Refine tutorial * chore: remove leftover dist assets from Refine example * chore(linter): add Refine to Rule001 and Rule003 * chore: format getting started with Refine.mdx * chore: remove .prettierrc file from the example
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { useTheme } from 'next-themes'
|
|
import Image from 'next/image'
|
|
|
|
import { BASE_PATH } from 'lib/constants'
|
|
|
|
interface ConnectionIconProps {
|
|
icon: string
|
|
iconFolder?: string
|
|
supportsDarkMode?: boolean
|
|
}
|
|
|
|
export const ConnectionIcon = ({ icon, iconFolder, supportsDarkMode }: ConnectionIconProps) => {
|
|
const { resolvedTheme } = useTheme()
|
|
|
|
const imageFolder =
|
|
iconFolder || (['ionic-angular'].includes(icon) ? 'icons/frameworks' : 'libraries')
|
|
|
|
const imageExtension = imageFolder === 'icons/frameworks' ? '' : '-icon'
|
|
|
|
const shouldUseDarkMode =
|
|
supportsDarkMode ||
|
|
['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix', 'refine'].includes(icon.toLowerCase())
|
|
|
|
const iconImgSrc = icon.startsWith('http')
|
|
? icon
|
|
: `${BASE_PATH}/img/${imageFolder}/${icon.toLowerCase()}${
|
|
shouldUseDarkMode && resolvedTheme?.includes('dark') ? '-dark' : ''
|
|
}${imageExtension}.svg`
|
|
|
|
return (
|
|
<Image
|
|
className="transition-all group-hover:scale-110"
|
|
src={iconImgSrc}
|
|
alt={`${icon} logo`}
|
|
width={14}
|
|
height={14}
|
|
/>
|
|
)
|
|
}
|