ConnectionIcon.tsx41 lines · main

1	import { useTheme } from 'next-themes'
2	import Image from 'next/image'
3
4	import { BASE_PATH } from '@/lib/constants'
5
6	interface ConnectionIconProps {
7	icon: string
8	iconFolder?: string
9	supportsDarkMode?: boolean
10	size?: number
11	className?: string
12	}
13
14	export const ConnectionIcon = ({
15	icon,
16	iconFolder,
17	supportsDarkMode,
18	size = 14,
19	className,
20	}: ConnectionIconProps) => {
21	const { resolvedTheme } = useTheme()
22
23	const imageFolder =
24	iconFolder || (['ionic-angular'].includes(icon) ? 'icons/frameworks' : 'libraries')
25
26	const imageExtension = imageFolder === 'icons/frameworks' ? '' : '-icon'
27
28	const shouldUseDarkMode =
29	supportsDarkMode ||
30	['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix', 'refine'].includes(icon.toLowerCase())
31
32	const iconImgSrc = icon.startsWith('http')
33	? icon
34	: `${BASE_PATH}/img/${imageFolder}/${icon.toLowerCase()}${
35	shouldUseDarkMode && resolvedTheme?.includes('dark') ? '-dark' : ''
36	}${imageExtension}.svg`
37
38	return (
39	<Image className={className} src={iconImgSrc} alt={`${icon} logo`} width={size} height={size} />
40	)
41	}