1import {
2 Children,
3 createContext,
4 useContext,
5 useEffect,
6 useRef,
7 useState,
8} from 'react'
9import { Tab } from '@headlessui/react'
10import clsx from 'clsx'
11import { create } from 'zustand'
12
13import { Tag } from '@/components/Tag'
14
15const languageNames = {
16 js: 'JavaScript',
17 ts: 'TypeScript',
18 javascript: 'JavaScript',
19 typescript: 'TypeScript',
20 php: 'PHP',
21 python: 'Python',
22 ruby: 'Ruby',
23 go: 'Go',
24}
25
26function getPanelTitle({ title, language }) {
27 return title ?? languageNames[language] ?? 'Code'
28}
29
30function ClipboardIcon(props) {
31 return (
32 <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
33 <path
34 strokeWidth="0"
35 d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
36 />
37 <path
38 fill="none"
39 strokeLinejoin="round"
40 d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
41 />
42 </svg>
43 )
44}
45
46function CopyButton({ code }) {
47 let [copyCount, setCopyCount] = useState(0)
48 let copied = copyCount > 0
49
50 useEffect(() => {
51 if (copyCount > 0) {
52 let timeout = setTimeout(() => setCopyCount(0), 1000)
53 return () => {
54 clearTimeout(timeout)
55 }
56 }
57 }, [copyCount])
58
59 return (
60 <button
61 type="button"
62 className={clsx(
63 'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
64 copied
65 ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
66 : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
67 )}
68 onClick={() => {
69 window.navigator.clipboard.writeText(code).then(() => {
70 setCopyCount((count) => count + 1)
71 })
72 }}
73 >
74 <span
75 aria-hidden={copied}
76 className={clsx(
77 'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
78 copied && '-translate-y-1.5 opacity-0'
79 )}
80 >
81 <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
82 Copy
83 </span>
84 <span
85 aria-hidden={!copied}
86 className={clsx(
87 'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
88 !copied && 'translate-y-1.5 opacity-0'
89 )}
90 >
91 Copied!
92 </span>
93 </button>
94 )
95}
96
97function CodePanelHeader({ tag, label }) {
98 if (!tag && !label) {
99 return null
100 }
101
102 return (
103 <div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
104 {tag && (
105 <div className="dark flex">
106 <Tag variant="small">{tag}</Tag>
107 </div>
108 )}
109 {tag && label && (
110 <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
111 )}
112 {label && (
113 <span className="font-mono text-xs text-zinc-400">{label}</span>
114 )}
115 </div>
116 )
117}
118
119function CodePanel({ tag, label, code, children }) {
120 let child = Children.only(children)
121
122 return (
123 <div className="group dark:bg-white/2.5">
124 <CodePanelHeader
125 tag={child.props.tag ?? tag}
126 label={child.props.label ?? label}
127 />
128 <div className="relative">
129 <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
130 <CopyButton code={child.props.code ?? code} />
131 </div>
132 </div>
133 )
134}
135
136function CodeGroupHeader({ title, children, selectedIndex }) {
137 let hasTabs = Children.count(children) > 1
138
139 if (!title && !hasTabs) {
140 return null
141 }
142
143 return (
144 <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
145 {title && (
146 <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
147 {title}
148 </h3>
149 )}
150 {hasTabs && (
151 <Tab.List className="-mb-px flex gap-4 text-xs font-medium">
152 {Children.map(children, (child, childIndex) => (
153 <Tab
154 className={clsx(
155 'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
156 childIndex === selectedIndex
157 ? 'border-emerald-500 text-emerald-400'
158 : 'border-transparent text-zinc-400 hover:text-zinc-300'
159 )}
160 >
161 {getPanelTitle(child.props)}
162 </Tab>
163 ))}
164 </Tab.List>
165 )}
166 </div>
167 )
168}
169
170function CodeGroupPanels({ children, ...props }) {
171 let hasTabs = Children.count(children) > 1
172
173 if (hasTabs) {
174 return (
175 <Tab.Panels>
176 {Children.map(children, (child) => (
177 <Tab.Panel>
178 <CodePanel {...props}>{child}</CodePanel>
179 </Tab.Panel>
180 ))}
181 </Tab.Panels>
182 )
183 }
184
185 return <CodePanel {...props}>{children}</CodePanel>
186}
187
188function usePreventLayoutShift() {
189 let positionRef = useRef()
190 let rafRef = useRef()
191
192 useEffect(() => {
193 return () => {
194 window.cancelAnimationFrame(rafRef.current)
195 }
196 }, [])
197
198 return {
199 positionRef,
200 preventLayoutShift(callback) {
201 let initialTop = positionRef.current.getBoundingClientRect().top
202
203 callback()
204
205 rafRef.current = window.requestAnimationFrame(() => {
206 let newTop = positionRef.current.getBoundingClientRect().top
207 window.scrollBy(0, newTop - initialTop)
208 })
209 },
210 }
211}
212
213const usePreferredLanguageStore = create((set) => ({
214 preferredLanguages: [],
215 addPreferredLanguage: (language) =>
216 set((state) => ({
217 preferredLanguages: [
218 ...state.preferredLanguages.filter(
219 (preferredLanguage) => preferredLanguage !== language
220 ),
221 language,
222 ],
223 })),
224}))
225
226function useTabGroupProps(availableLanguages) {
227 let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
228 let [selectedIndex, setSelectedIndex] = useState(0)
229 let activeLanguage = [...availableLanguages].sort(
230 (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
231 )[0]
232 let languageIndex = availableLanguages.indexOf(activeLanguage)
233 let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
234 if (newSelectedIndex !== selectedIndex) {
235 setSelectedIndex(newSelectedIndex)
236 }
237
238 let { positionRef, preventLayoutShift } = usePreventLayoutShift()
239
240 return {
241 as: 'div',
242 ref: positionRef,
243 selectedIndex,
244 onChange: (newSelectedIndex) => {
245 preventLayoutShift(() =>
246 addPreferredLanguage(availableLanguages[newSelectedIndex])
247 )
248 },
249 }
250}
251
252const CodeGroupContext = createContext(false)
253
254export function CodeGroup({ children, title, ...props }) {
255 let languages = Children.map(children, (child) => getPanelTitle(child.props))
256 let tabGroupProps = useTabGroupProps(languages)
257 let hasTabs = Children.count(children) > 1
258 let Container = hasTabs ? Tab.Group : 'div'
259 let containerProps = hasTabs ? tabGroupProps : {}
260 let headerProps = hasTabs
261 ? { selectedIndex: tabGroupProps.selectedIndex }
262 : {}
263
264 return (
265 <CodeGroupContext.Provider value={true}>
266 <Container
267 {...containerProps}
268 className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
269 >
270 <CodeGroupHeader title={title} {...headerProps}>
271 {children}
272 </CodeGroupHeader>
273 <CodeGroupPanels {...props}>{children}</CodeGroupPanels>
274 </Container>
275 </CodeGroupContext.Provider>
276 )
277}
278
279export function Code({ children, ...props }) {
280 let isGrouped = useContext(CodeGroupContext)
281
282 if (isGrouped) {
283 return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
284 }
285
286 return <code {...props}>{children}</code>
287}
288
289export function Pre({ children, ...props }) {
290 let isGrouped = useContext(CodeGroupContext)
291
292 if (isGrouped) {
293 return children
294 }
295
296 return <CodeGroup {...props}>{children}</CodeGroup>
297}