wehub-resource-sync
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Tabs, Tab } from "../docs-tabs";
|
|
|
|
interface IframeSwitcherProps {
|
|
id?: string;
|
|
exampleUrl: string;
|
|
codeUrl: string;
|
|
exampleLabel?: string;
|
|
codeLabel?: string;
|
|
height?: string;
|
|
}
|
|
|
|
export function IframeSwitcher({
|
|
id,
|
|
exampleUrl,
|
|
codeUrl,
|
|
exampleLabel = "Demo",
|
|
codeLabel = "Code",
|
|
height = "600px",
|
|
}: IframeSwitcherProps) {
|
|
return (
|
|
<div id={id}>
|
|
<Tabs items={[exampleLabel, codeLabel]}>
|
|
<Tab value={exampleLabel}>
|
|
<iframe
|
|
src={exampleUrl}
|
|
className="shell-docs-radius-surface w-full border-0 bg-[var(--bg-surface)]"
|
|
style={{ height }}
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
|
loading="lazy"
|
|
/>
|
|
</Tab>
|
|
<Tab value={codeLabel}>
|
|
<iframe
|
|
src={codeUrl}
|
|
className="shell-docs-radius-surface w-full border-0 bg-[var(--bg-surface)]"
|
|
style={{ height }}
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
|
loading="lazy"
|
|
/>
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|