forked from Gerome-Elassaad/CodingIT
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfragment-code.tsx
More file actions
123 lines (115 loc) · 3.86 KB
/
Copy pathfragment-code.tsx
File metadata and controls
123 lines (115 loc) · 3.86 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import dynamic from 'next/dynamic'
import { Button } from './ui/button'
import { CopyButton } from './ui/copy-button'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { Download, FileText } from 'lucide-react'
import { useState, useEffect } from 'react'
const CodeView = dynamic(() => import('./code-view').then(mod => mod.CodeView), {
ssr: false,
})
export function FragmentCode({
files,
}: {
files: { name: string; content: string }[]
}) {
// Safely handle undefined or invalid files array
if (!files || !Array.isArray(files)) {
return (
<div className="flex items-center justify-center h-full text-muted-foreground">
No files to display
</div>
)
}
// Filter out any invalid files
const validFiles = files.filter(file => file && typeof file === 'object' && file.name && file.content !== undefined)
const [currentFile, setCurrentFile] = useState(validFiles[0]?.name || '')
const currentFileContent = validFiles.find(
(file) => file.name === currentFile,
)?.content
// Update current file when validFiles changes
useEffect(() => {
if (validFiles.length > 0 && !validFiles.find(f => f.name === currentFile)) {
setCurrentFile(validFiles[0].name)
}
}, [validFiles, currentFile])
function download(filename: string, content: string) {
const blob = new Blob([content], { type: 'text/plain' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
}
if (!validFiles || validFiles.length === 0) {
return (
<div className="flex items-center justify-center h-full text-muted-foreground">
No files to display
</div>
)
}
return (
<div className="flex flex-col h-full">
<div className="flex items-center px-2 pt-1 gap-2">
<div className="flex flex-1 gap-2 overflow-x-auto">
{validFiles.map((file) => (
<div
key={file.name}
className={`flex gap-2 select-none cursor-pointer items-center text-sm text-muted-foreground px-2 py-1 rounded-md hover:bg-primary/5 dark:hover:bg-muted border ${
file.name === currentFile ? 'bg-muted border-muted' : ''
}`}
onClick={() => setCurrentFile(file.name)}
>
<FileText className="h-4 w-4" />
{file.name}
</div>
))}
</div>
<div className="flex items-center gap-2">
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<CopyButton
content={currentFileContent || ''}
className="text-muted-foreground"
/>
</TooltipTrigger>
<TooltipContent side="bottom">Copy</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="text-muted-foreground"
onClick={() =>
download(currentFile, currentFileContent || '')
}
>
<Download className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Download</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<div className="flex flex-col flex-1 overflow-x-auto">
<CodeView
code={currentFileContent || ''}
lang={currentFile.split('.').pop() || ''}
/>
</div>
</div>
)
}