-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMarkdownLink.jsx
More file actions
69 lines (64 loc) · 2.11 KB
/
MarkdownLink.jsx
File metadata and controls
69 lines (64 loc) · 2.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React, { Suspense, lazy } from 'react';
import { useSidePanel } from '../context/SidePanelContext';
import { vocabulary } from '../data/vocabulary';
import { ArrowSquareOut, CircleNotch } from '@phosphor-icons/react';
const MarkdownLink = ({ href, children, width = 450, className, ...props }) => {
const { openSidePanel } = useSidePanel();
const isExternal = href?.startsWith('http') || href?.startsWith('https');
const isVocab =
href && (href.startsWith('/vocab/') || href.includes('/#/vocab/'));
if (isVocab) {
const parts = href.split('/vocab/');
const term = parts[1];
const entry = vocabulary[term];
return (
<a
href={href}
onClick={(e) => {
e.preventDefault();
if (entry && entry.loader) {
const LazyVocabComponent = lazy(entry.loader);
openSidePanel(
entry.title,
<Suspense
fallback={
<div className="flex items-center justify-center p-8">
<CircleNotch
size={32}
className="animate-spin text-gray-400"
/>
</div>
}
>
<LazyVocabComponent />
</Suspense>,
width,
);
} else {
console.warn(`Vocabulary term or loader not found: ${term}`);
}
}}
className={
className ||
'text-pink-400 hover:text-pink-300 transition-colors inline-flex items-center gap-1 border-b border-pink-500/30 border-dashed hover:border-solid cursor-help'
}
title="Click for definition"
{...props}
>
{children}
</a>
);
}
return (
<a
href={href}
className={`${className || 'text-primary-400 hover:text-primary-300'} inline-flex items-center gap-1`}
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined}
{...props}
>
{children} {isExternal && <ArrowSquareOut className="text-xs" />}
</a>
);
};
export default MarkdownLink;