Hello, world!

1import React, { useState } from "react";
2import { Clipboard, Check } from "lucide-react";
3import { motion, AnimatePresence } from "framer-motion";
4import { Code, MonitorPlay } from "lucide-react";
5
6interface CodePreviewProps {
7  component: React.ReactNode;
8  code: string;
9}
10
11const CodePreview: React.FC<CodePreviewProps> = ({ component, code }) => {
12  const [showCode, setShowCode] = useState(false);
13  const [copied, setCopied] = useState(false);
14
15  const handleCopy = () => {
16    navigator.clipboard.writeText(code);
17    setCopied(true);
18    setTimeout(() => setCopied(false), 2000);
19  };
20
21  return (
22    <div className="w-full h-full">
23      <div className="flex mb-2">
24        <div className="flex bg-red-500 rounded-md">
25          <button
26            className={'px-4 py-2 ' + (!showCode ? 'text-white' : 'text-gray-400')}
27            onClick={() => setShowCode(false)}
28          >
29            <MonitorPlay size={16} />
30          </button>
31          <button
32            className={'px-4 py-2 ' + (showCode ? 'text-white' : 'text-gray-400')}
33            onClick={() => setShowCode(true)}
34          >
35            <Code size={16} />
36          </button>
37        </div>
38        {showCode && (
39          <button
40            className="text-white bg-red-400 rounded-md p-2"
41            onClick={handleCopy}
42          >
43            <AnimatePresence>
44              {copied ? (
45                <motion.div
46                  key="check"
47                  initial={{ opacity: 0, y: 1 }}
48                  animate={{ opacity: 1, y: 0 }}
49                  exit={{ opacity: 0, y: 1 }}
50                  transition={{ duration: 0.15 }}
51                >
52                  <Check className="h-4 w-4 text-green-500" />
53                </motion.div>
54              ) : (
55                <motion.div
56                  key="clipboard"
57                  initial={{ opacity: 0, y: 1 }}
58                  animate={{ opacity: 1, y: 0 }}
59                  exit={{ opacity: 0, y: 1 }}
60                  transition={{ duration: 0.15 }}
61                >
62                  <Clipboard className="h-4 w-4" />
63                </motion.div>
64              )}
65            </AnimatePresence>
66          </button>
67        )}
68      </div>
69      <div className="p-6 bg-zinc-950 text-white h-full w-full rounded-md">
70        {showCode ? (
71          <pre className="overflow-auto h-full">{code}</pre>
72        ) : (
73          <div className="flex justify-center items-center h-full">
74            {component}
75          </div>
76        )}
77      </div>
78    </div>
79  );
80};
81
82export default CodePreview;
83