ClientLibrary.tsx64 lines · main

1	import { BookOpen, Github } from 'lucide-react'
2	import { Badge, Button } from 'ui'
3
4	import { BASE_PATH } from '@/lib/constants'
5
6	interface ClientLibraryProps {
7	language: string
8	officialSupport?: boolean
9	docsUrl?: string
10	gitUrl?: string
11	altIconName?: string
12	}
13
14	export const ClientLibrary = ({
15	language,
16	officialSupport,
17	docsUrl,
18	gitUrl,
19	altIconName,
20	}: ClientLibraryProps) => {
21	return (
22	<div className="flex items-start md:space-x-6">
23	<img
24	src={`${BASE_PATH}/img/libraries/${
25	altIconName ? `${altIconName}-icon.svg` : `${language.toLowerCase()}-icon.svg`
26	}`}
27	alt={`${language} logo`}
28	width="21"
29	className="hidden md:block"
30	/>
31	<div className="space-y-4">
32	<div className="flex items-center gap-2">
33	<img
34	src={`${BASE_PATH}/img/libraries/${
35	altIconName ? `${altIconName}-icon.svg` : `${language.toLowerCase()}-icon.svg`
36	}`}
37	alt={`${language} logo`}
38	width="21"
39	className="block md:hidden"
40	/>
41	<h5 className="flex items-center gap-2 text-base text-foreground">
42	{language} {!officialSupport && <Badge variant="success">Community</Badge>}
43	</h5>
44	</div>
45	<div className="flex gap-2">
46	{docsUrl && (
47	<a href={docsUrl} target="_blank" rel="noreferrer">
48	<Button icon={<BookOpen />} type="default">
49	Docs
50	</Button>
51	</a>
52	)}
53	{gitUrl && (
54	<a href={gitUrl} target="_blank" rel="noreferrer">
55	<Button icon={<Github />} type="default">
56	<span className="hidden md:inline">See</span> GitHub
57	</Button>
58	</a>
59	)}
60	</div>
61	</div>
62	</div>
63	)
64	}