ConnectionIcon.tsx48 lines · main

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