From 5e7c22beb24103c759c32ebc0523ea83d059c668 Mon Sep 17 00:00:00 2001
From: Jarrison Cano <me@jarrison.dev>
Date: Thu, 20 Jun 2024 21:23:35 -0500
Subject: [PATCH 1/2] feat: add dropdown menu for copying code

---
 app/components/playground.tsx | 87 +++++++++++++++++++++++++++++++----
 package.json                  |  1 +
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/app/components/playground.tsx b/app/components/playground.tsx
index 4643511..b10200b 100644
--- a/app/components/playground.tsx
+++ b/app/components/playground.tsx
@@ -1,3 +1,11 @@
+import { cn } from '@/lib/utils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ClipboardIcon } from 'lucide-react';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { toast } from 'sonner';
@@ -9,24 +17,49 @@ type PlaygroundProps = {
   setTheme: (theme: 'light' | 'dark') => void;
 };
 
+enum Technology {
+  HTML = 'html',
+  REACT = 'react',
+  VUE = 'vue',
+}
+
 const Playground: React.FC<PlaygroundProps> = ({
   children,
   setPreview,
   theme,
   setTheme,
 }) => {
-  const copyCode = () => {
-    const code = ReactDOMServer.renderToString(children);
+  const [hasCopied, setHasCopied] = React.useState(false);
+
+  const itemClasses = cn(
+    'text-xs font-light text-white flex items-center py-1 px-2 pr-9 rounded-sm w-full text-left cursor-pointer outline-none hover:bg-slate-700 focus:bg-slate-700'
+  );
+
+  const copyCode = (type: Technology) => {
+    let code = ReactDOMServer.renderToString(children);
+
+    switch (type) {
+      case Technology.REACT:
+        code = code.replace(/class=/g, 'className=');
+        break;
+    }
 
     navigator.clipboard.writeText(code);
     toast.success('Copied to clipboard');
+    setHasCopied(true);
   };
 
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);
+  }, [hasCopied]);
+
   return (
     <>
       <div className="relative min-h-[300px] w-full overflow-hidden rounded-lg ring-1 ring-slate-900/10">
         <div className="absolute left-4 top-4 z-10 cursor-pointer">
-          <div className="flex flex-row gap-4">
+          <div className="flex flex-row gap-3">
             <div
               className=" rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white"
               onClick={() => {
@@ -36,12 +69,48 @@ const Playground: React.FC<PlaygroundProps> = ({
             >
               preview
             </div>
-            <div
-              className="rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white"
-              onClick={copyCode}
-            >
-              copy code
-            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <div className="rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white flex items-center gap-1">
+                  copy code
+                  {hasCopied ? (
+                    <CheckIcon className="h-3 w-3" />
+                  ) : (
+                    <ClipboardIcon className="h-3 w-3" />
+                  )}
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="bg-slate-900 rounded-md p-1 text-white text-xs font-medium mt-1"
+              >
+                <DropdownMenuItem
+                  className={itemClasses}
+                  onClick={() => {
+                    copyCode(Technology.HTML);
+                  }}
+                >
+                  html
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className={itemClasses}
+                  onClick={() => {
+                    copyCode(Technology.REACT);
+                  }}
+                >
+                  react
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className={itemClasses}
+                  onClick={() => {
+                    copyCode(Technology.VUE);
+                  }}
+                >
+                  vue
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
         {children}
diff --git a/package.json b/package.json
index ef8fd62..f6f22c0 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",

From 1945b66b880c204c45a094bd1b256206a5ae2d3a Mon Sep 17 00:00:00 2001
From: Jarrison Cano <me@jarrison.dev>
Date: Thu, 20 Jun 2024 21:25:54 -0500
Subject: [PATCH 2/2] refactor: remove Vue technology option from Playground
 component

---
 app/components/playground.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/components/playground.tsx b/app/components/playground.tsx
index b10200b..8429052 100644
--- a/app/components/playground.tsx
+++ b/app/components/playground.tsx
@@ -20,7 +20,6 @@ type PlaygroundProps = {
 enum Technology {
   HTML = 'html',
   REACT = 'react',
-  VUE = 'vue',
 }
 
 const Playground: React.FC<PlaygroundProps> = ({
@@ -101,14 +100,6 @@ const Playground: React.FC<PlaygroundProps> = ({
                 >
                   react
                 </DropdownMenuItem>
-                <DropdownMenuItem
-                  className={itemClasses}
-                  onClick={() => {
-                    copyCode(Technology.VUE);
-                  }}
-                >
-                  vue
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>