shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs & readme: fix demo

Browse Source
This commit is contained in:
dswbx
2025-08-30 16:21:46 +02:00
parent ce773007f0
commit dc08d12ce6
3 changed files with 67 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
docs/app/_components/StackBlitz.tsx
View File

@@ -3,79 +3,77 @@
import * as React from "react";
export const examples = {
adminRich: {
path: "github/bknd-io/bknd-examples",
startScript: "example-admin-rich",
initialPath: "/data/schema"
}
adminRich: {
path: "github/bknd-io/bknd-examples",
startScript: "example-admin-rich",
initialPath: "/data/schema",
},
};
export const StackBlitz = ({
path,
ratio = 9 / 16,
example,
...props
path,
ratio = 9 / 16,
example,
...props
}: {
path?: string;
ratio?: number;
example?: keyof typeof examples;
[key: string]: unknown;
path?: string;
ratio?: number;
example?: keyof typeof examples;
[key: string]: unknown;
}) => {
const selected = example ? examples[example] : undefined;
const finalPath = path || selected?.path || "github/bknd-io/bknd-examples";
const selected = example ? examples[example] : undefined;
const finalPath = path || selected?.path || "github/bknd-io/bknd-examples";
const params = new URLSearchParams({
ctl: "1",
hideExplorer: "1",
embed: "1",
view: "preview",
...(selected || {}),
...props
});
const params = new URLSearchParams({
ctl: "1",
hideExplorer: "1",
embed: "1",
view: "preview",
...(selected || {}),
...props,
});
const url = new URL(
`https://stackblitz.com/${finalPath}?${params.toString()}`
);
const url = new URL(`https://stackblitz.com/${finalPath}?${params.toString()}`);
return (
<>
<div
style={{
position: "relative",
overflow: "hidden",
width: "100%",
paddingTop: `${ratio * 100}%`
}}
>
<iframe
width="100%"
height="100%"
src={url.toString()}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
border: "none"
}}
/>
</div>
<div
style={{
fontSize: "80%",
opacity: 0.7,
marginTop: "0.2rem",
marginBottom: "1rem",
textAlign: "center"
}}
>
If you&rsquo;re having issues viewing it inline,{" "}
<a href={url.toString()} target="_blank" rel="noreferrer">
try in a new tab
</a>
.
</div>
</>
);
return (
<>
<div
style={{
position: "relative",
overflow: "hidden",
width: "100%",
paddingTop: `${ratio * 100}%`,
}}
>
<iframe
width="100%"
height="100%"
src={url.toString()}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
border: "none",
}}
/>
</div>
<div
style={{
fontSize: "80%",
opacity: 0.7,
marginTop: "0.2rem",
marginBottom: "1rem",
textAlign: "center",
}}
>
If you&rsquo;re having issues viewing it inline,{" "}
<a href={url.toString()} target="_blank" rel="noreferrer">
try in a new tab
</a>
.
</div>
</>
);
};