LanguageSelector.tsx87 lines · main

1	import { ChevronDown, Terminal } from 'lucide-react'
2	import { useState } from 'react'
3	import {
4	Button,
5	Command,
6	CommandGroup,
7	CommandItem,
8	CommandList,
9	Popover,
10	PopoverContent,
11	PopoverTrigger,
12	} from 'ui'
13
14	import { BASE_PATH } from '@/lib/constants'
15	import { useAppStateSnapshot } from '@/state/app-state'
16
17	interface LanguageSelectorProps {
18	/**
19	* Only show icons to represent the language
20	*/
21	simplifiedVersion?: boolean
22	}
23
24	const LanguageSelector = ({ simplifiedVersion = false }: LanguageSelectorProps) => {
25	const snap = useAppStateSnapshot()
26	const [showLanguage, setShowLanguage] = useState(false)
27
28	const updateLanguage = (value: 'js' | 'bash') => {
29	snap.setDocsLanguage(value)
30	setShowLanguage(false)
31	}
32
33	return (
34	<div className="flex items-center gap-x-2">
35	<Popover modal={false} open={showLanguage} onOpenChange={setShowLanguage}>
36	<PopoverTrigger asChild>
37	<Button
38	type="default"
39	className={simplifiedVersion ? 'px-1' : ''}
40	icon={
41	simplifiedVersion ? (
42	snap.docsLanguage === 'js' ? (
43	<img
44	src={`${BASE_PATH}/img/libraries/javascript-icon.svg`}
45	alt={`javascript logo`}
46	width="14"
47	/>
48	) : (
49	<Terminal size={14} strokeWidth={2.5} />
50	)
51	) : undefined
52	}
53	iconRight={!simplifiedVersion && <ChevronDown size={14} strokeWidth={2} />}
54	>
55	{!simplifiedVersion
56	? `Language: ${snap.docsLanguage === 'js' ? 'Javascript' : 'Bash'}`
57	: undefined}
58	</Button>
59	</PopoverTrigger>
60	<PopoverContent className="p-0 w-24" side="bottom" align="end">
61	<Command>
62	<CommandList>
63	<CommandGroup>
64	<CommandItem
65	className="cursor-pointer"
66	onSelect={() => updateLanguage('js')}
67	onClick={() => updateLanguage('js')}
68	>
69	<p>Javascript</p>
70	</CommandItem>
71	<CommandItem
72	className="cursor-pointer"
73	onSelect={() => updateLanguage('bash')}
74	onClick={() => updateLanguage('bash')}
75	>
76	<p>Bash</p>
77	</CommandItem>
78	</CommandGroup>
79	</CommandList>
80	</Command>
81	</PopoverContent>
82	</Popover>
83	</div>
84	)
85	}
86
87	export default LanguageSelector