All files / src/components SourceViewer.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { useLabState } from '../useLabState';
import { Code2, Copy, Check, X } from 'lucide-react';
 
export default function SourceViewer() {
  const { viewSource, setViewSource, copyToClipboard, copied } = useLabState();
 
  if (!viewSource) return null;
 
  return (
    <div className="fixed inset-0 z-[400] flex items-center justify-center p-4 bg-lab-bg/95 backdrop-blur-xl animate-in fade-in zoom-in duration-300">
      <div className="bg-lab-bg-secondary border border-lab-border rounded-[2.5rem] w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden shadow-2xl ring-1 ring-white/10">
        <div className="flex justify-between items-center p-6 border-b border-lab-border bg-lab-bg-secondary/50">
          <div className="flex items-center gap-3"><div className="p-2 bg-lab-accent/20 rounded-xl"><Code2 className="w-5 h-5 text-lab-accent" /></div><h3 className="font-bold text-lab-fg">Theory Source Logic</h3></div>
          <div className="flex gap-2">
            <button onClick={() => copyToClipboard(viewSource.content)} className="flex items-center gap-2 px-4 py-2 bg-lab-button-bg hover:bg-lab-button-bg rounded-xl text-xs font-bold text-white transition-all">{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />} {copied ? "COPIED" : "COPY CODE"}</button>
            <button onClick={() => setViewSource(null)} className="p-2 bg-lab-bg-elevated hover:bg-lab-bg-elevated rounded-xl text-lab-fg-secondary hover:text-white transition-colors"><X className="w-6 h-6" /></button>
          </div>
        </div>
        <div className="flex-1 overflow-auto p-8 font-mono text-[10px] md:text-xs text-lab-fg-secondary bg-lab-bg/50 custom-scrollbar"><pre className="whitespace-pre-wrap">{String(viewSource.content)}</pre></div>
      </div>
    </div>
  );
}