mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-09-20 16:55:32 -04:00
34 lines
742 B
TypeScript
34 lines
742 B
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const CodePen = ({
|
|
username,
|
|
id,
|
|
defaultTab = "html",
|
|
preview = true,
|
|
editable = false,
|
|
title = "CodePen embed",
|
|
className,
|
|
...rest
|
|
}: {
|
|
username: string;
|
|
id: string;
|
|
defaultTab?: string;
|
|
preview?: boolean;
|
|
editable?: boolean;
|
|
title?: string;
|
|
} & React.ComponentProps<"iframe">) => (
|
|
<iframe
|
|
src={`https://codepen.io/${username}/embed/${id}/?${new URLSearchParams({
|
|
"default-tab": `${defaultTab},result`,
|
|
preview: `${preview}`,
|
|
editable: `${editable}`,
|
|
})}`}
|
|
title={title}
|
|
sandbox="allow-scripts allow-popups allow-forms"
|
|
className={cn("h-[500px] w-full overflow-hidden border-none", className)}
|
|
{...rest}
|
|
/>
|
|
);
|
|
|
|
export { CodePen };
|