Skip to content

feat: add dropdown to copy html or React snipet #7

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add dropdown to copy html or React snipet #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e7c22b
feat: add dropdown menu for copying code
jarrisondev Jun 21, 2024
1945b66
refactor: remove Vue technology option from Playground component
jarrisondev Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 69 additions & 9 deletions app/components/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,24 +17,48 @@ type PlaygroundProps = {
setTheme: (theme: 'light' | 'dark') => void;
};

enum Technology {
HTML = 'html',
REACT = 'react',
}

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={() => {
Expand All @@ -36,12 +68,40 @@ 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>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
{children}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down